HTML 1

O pagină web este un document care poate fi citit și/sau privit, adaptat folosirii în rețeaua internet. Pagina web poate conține texte, imagini și hiperlegături. O hiperlegătură (sau link) este un instrument de deplasare rapidă de la o pagină la alta pe internet. Există și link-uri către secțiuni diferite în cadrul aceleiași pagini. Paginile web conțin, în afară de elementele vizibile (text și imagine), și o seamă de elemente de control și formatare. Aceste elemente de control și formatare sunt realizate într-un limbaj specific, numit HTML (Hyper Text Marck-up Language). Elementul principal al limbajului HTML îl constituie tag-ul, sau eticheta. Acesta este o instrucțiune pentru browser (aplicația care prelucrează pagina) și este încadrat între paranteze unghiulare <, >.

Pentru ca o pagină web să poată fi accesată pretutindeni pe internet, este nevoie ca ea să fie trimisă (postată, uploadată) pe un server. Pentru a posta paginile web pe internet, există aplicații și servicii web specializate. În cele ce urmează vom studia mai întâi modul de creare și modificare a paginilor web, apoi câteva metode de postare.

Pentru a crea o pagină web avem nevoie de un editor de texte și de un browser. Există editoare specializate pentru lucrul cu pagini html, dar pentru început vom folosi editorul Notepad. Ca browser putem folosi oricare dintre aplicațiile Chrome, Internet Explorer, Mozilla sau altele. Pașii sunt următorii:

1. Deschide NOTEPAD și începe un fișier nou. Fișierul nou îl salvezi imediat cu extensia .html. Pentru a reuși acest lucru, deoarece Notepad atașează în mod automat extensia .txt fișierelor pe care le salvezi, selectează din lista derulantă Salvare cu tipul opțiunea toate fișierele, sau all files.

De exemplu: vasile.html

2. Scrie următoarele în pagina notepad:

<html>

<head>

</head>

<body><h2>Prima mea pagina web!</h2>

</body>

</html>

3. Salvează.

4. deschide fișierul salvat cu un browser. Observă ca s-a deschis ca o pagină web.

5. deschide din nou fișierul cu notepad și adaugă textul CONTINUTUL PAGINII VA FI AICI inainte de tag-ul </body>:

<html>

<head>

</head>

<body><h2>Prima mea pagina web!</h2>

CONTINUTUL PAGINII VA FI AICI

</body>

</html>

6. salvează din nou fișierul.

7. Deschide-l iar cu Chrome și observă ce modificare a apărut.

8. Modifică din nou fișierul din notepad și înlocuiește textul CONTINUTUL PAGINII VA FI AICI cu propozitia Foarte curand voi face aici o pagina web functională, cu poze, background, tabele, link-uri, bannere, formulare și liste. Vizualizează modificările cu Chrome.

9. Modifica tag-ul <body> in felul urmator:

<body bgcolor= red>
Vizualizeaza din nou pagina in browser. Inlocuieste apoi red cu green, blue, magenta, etc.

_____________________________________________________

HTML 2

Obiective: Tagurile <p> (paragraf), <br> (branch), <font>, atributele align, size, color, face.

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome.

<html>
<head>
<title> Prima mea pagina web!</title>
</head>

<body>

<p>Paragraf </br> Salut! Aici voi pune mai tarziu continutul! </p>

<h2>Titlu (heading)</h2>

<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>

<b>Ingrosat (bold)</b>

<i>Inclinat (italic)</i>

<p> <p align="left"> Paragraful este un element de baza in editare de text. Tag-ul pentru paragraf este p încadrat de parantezele unghiulare. </br>Browserul va plasa o linie goala deasupra si dedesubtul textului pentru a fi evidentiat,.</P>

</font>
</body>

</html>

Exerciții

Înlocuiește h2 cu h1, h3, h4, h5, h6 și vezi ce efect are.
Înlocuiește <body> cu <body bgcolor=red> apoi bgcolor=green apoi blue si vezi efectul.
Înlocuiește font color=red cu black, cyan, green.
Înlocuiește în tagul font atributul size=4 cu size=1 și size=6.
Înlocuiește în tagul font atributul name cu valoarea times new roman.

Dupa fiecare modificare in notepad, salvezi si reincarci pagina chrome.

_________________________________________________________

HTML 3

Obiective: Tagul <img>, atributele src, alt, width, height, align, valign.

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome sau I.E..

Cauta in calculator o imagine (fisier jpg) sau descarcă de pe internet. Retine numele si calea de acces la fisier, de exemplu "d:/image.jpg" .

<html>
<head>
<title> Inserare imagini </title>
</head>

<body>

<p align=left> Paragraful este un element de baza in editare de text. Tag-ul pentru paragraf este p încadrat de parantezele unghiulare. Aici se trece la <br>

linia urmatoare. In HTML nu se tine cont de numarul de spatii dintre cuvinte si de sfarsitul de linie.

</P>

</font>

</body>

</html>

EXERCIȚII

Dupa fiecare modificare in notepad, salvezi si reincarci pagina chrome.

Înlocuiește argumentul “alt” cu alt text;
Inlocuieste argumentul width cu valoarea 600;
Adauga argumentul height=500. Observa daca s-a deformat imaginea.
Adauga atributul align, prima data cu valoarea align=left, a doua oara cu valoarea align=right. Imaginea se afiseaza prima data in stanga, a doua oara in dreapta textului.
In mod asemanator, adauga atributul valign, prima data cu valoarea top, a doua oara cu valoarea bottom.

______________________________________________________

HTML 4

Obiective: realizarea unei hiper-legături

Tagul <a href=…></a>

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome sau Internet Explorer.

Caută pe internet o pagină web către care vei realiza o hiperlegătură (link). Afișează acea pagină, copiază cu copy adresa ei din browser și introdu-o cu paste în tagul <a> ca in exemplul de mai jos.

<html>
<head>
<title> Inserare hiperlegaturi <title>
</head>

<h2>Inserare hiperlegaturi sau link-uri</h2>

<body>

<a href=http://ro.wikipedia.org/wiki/Crin target=1> Crin 1 </a>

<a href=http://ro.wikipedia.org/wiki/Crin > Crin 2 </a>

</font>

</body>

După fiecare modificare in notepad, salvezi si reîncarci pagina chrome.
Vizualizează pagina in Chrome sau Internet Explorer.
Ce diferență observi între varianta cu target=1 și varianta fără target?
Modifica argumentul target si da-i alta valoare la alegere, formata din litere sau cifre.
Ce rol are cuvântul „crin” plasat intre tagurile <a> si </a>?

_________________________________________________________

HTML 5

Obiective: Liste ordonate și neordonate, liste de definitii

Etichetele <ol> (ordered list) … </ol>, <ul> (unordered list)… </ul>, <li> (list item)… </li>,

<dl>…</dl> (definition list), <dt>…</dt> (termen de definit), <dd>…</dd> (definitie).

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome sau Internet Explorer.

<html>
<head>
<title> liste ordonate si neordonate </title>
</head>

<h2>Liste ordonate</h2>

<body>

<h4 align=left>Obiective</h4>

<li>Să citesc Critica rațiunii pure de Kant</li>

</ol>

<h2>Liste neordonate</h2>

<h4 align="left"> exerciții pentru mușchii pectorali</h4>

<ul type="circle"> <li>impins cu bara la piept</li>

<li>fluturari cu gantere</li>

<li>flotari</li>

</ul>

<h2>Liste de definitii</h2>

<dl>

<dt><b>Impins din culcat cu haltera</b></dt>

<dd>solicita in special partea inferioara a pectoralilor, dar stimuleaza intreaga zona piept-deltoid-triceps..</dd>

<dt><b>Fluturari cu gantere</b></dt>

<dd>solicita zona interioara a pectoralilor, pentru definirea "santului" fiind recomandate folosirea unui numar mai mare de repetari cu o greutate mai mica</dd>

</dl>

</font>

</body>

</html>

Dupa fiecare modificare in notepad, salvezi si reincarci pagina chrome.

Modifica eticheta<ol type = ‘a’> si da-i valoarea ‚A’ sau 1.

Modifica eticheta <ul type = circle> si da-i valoarea square sau disc.
_____________________________________

HTML 6

Tabele (1)

Etichetele <table> … </table>, <tr> (table row = linii)… </tr>, <td> (table data = coloane)… </td>

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome sau Internet Explorer.

<html>
<head>
<title> Tabele </title>
</head>

<h2>Tabele</h2>

<body>

<font size=4 face=timesnewroman>

<table border=1>

<tr><td>Linia 1 Coloana 1</td>

<td>Linia 1 Coloana 2 </td></tr>

<tr><td>Linia 2 Coloana 1</td>

<td>Linia 2 Coloana 2</td></tr>

</table>

</font>

</body>

</html>
Dupa fiecare modificare in notepad, salvezi si reincarci pagina chrome.
Vizualizeaza pagina in Chrome sau Internet Explorer.
Adauga la eticheta <table> atributul bgcolor=yellow
Adauga la eticheta <tr> a primei linii atributul bgcolor=red
Adauga la eticheta <td> a primei coloane din a doua linie atributul bgcolor=blue
Adauga la eticheta <table> atributul cellspacing="10"
Adauga la eticheta <table> atributul cellpadding="10"
Incearca si alte valori pentru atributele introduse mai sus.
Introdu o imagine intr-una din celulele tabelei folosind tag-ul Img.

_____________________________________________________

HTML 7

FRAME

Etichetele <frameset> … </frameset>, <frame>

Tag-urile frame și frameset permit crearea unei structuri de cadre sau panouri (frame-uri) imbricate, afișate simultan în fereastra browserului. Exercițiul următor creează o structură de 3 frame-uri. Fiecare panou are codul său html scris separat în fișierul lui. Toate fișierele html ale structurii de frame-uri vor fi localizate în același director, pentru simplificare. Dacă nu sunt localizate în același director, este nevoie de indicarea corectă a căii (path) către ele.

Scrie cu notepad, salvează cu extensia .html, vizualizează cu Chrome sau Internet Explorer.

Creăm un director nou pe Desktop și salvăm în ele toate cele 4 fișiere html.

1) Creează mai întâi pagina rădăcină, cu numele index.html

</frameset>

</html>

2) Creează apoi cele 3 pagini subordonate

a. title.html

<html>

<center><h2>MENIU</h2></center>

</body>

</html>

b. menu.html

<html>

<center><h2>MENIU</h2></center>

<a href="http://tutorialehtml.com/htmlt/frames.php" target=continut>Html FRAME</a><br>

<a href="http://www.w3schools.com/tags/tag_table.asp" target=continut>Html TABLE</a>

</body>

</html>

c. content.html

<html>

<center><h2>CONTINUT</h2></center>

</body>

</html>

În urma executării fișierului index.html, setul de cadre este afișat. Fișierul index descrie pozițiile relative și raporturile dintre cele 3 frame-uri. Primul dintre ele, title.html, este așezat orizontal, și ocupă 20% din înălțimea totală a ferestrei (rows="20%,*"). Celelalte două, menu și content, sunt așezate unul lângă celălalt sub title, și își împart lățimea totală a ferestrei browserului în raportul de 30% - 70% (cols="30%,*").

Efectul apăsării pe unul din elementele ancoră din cadrul menu.html este îcărcarea unei anumite pagini în cadrul content.html.

__________________________________________________________

HTML 8

Tabele neregulate

Exemplul care urmează construiește o tabelă cu structură neregulată de linii și coloane. O modalitate de rezolvare este folosirea atributului rowspan = n, unde n este numărul de rânduri pe care le acoperă înălțimea unei celule, respectiv colspan=n, unde n este numărul de coloane acoperite de lățimea unei celule.
Rândul care conține celula cu textul Linia 3 coloana 2 nu este afișat pe întreaga lățime a tabelului, ci este mai scurt, din cauza argumentului rowspan=2.

<html>
<head>
<title> Tabele </title>
</head>
<h2>Tabele</h2>
<body bgcolor=yellow>
<font size=4 face=timesnewroman><b>
<table border="8">
<tr><td bgcolor=blue colspan=2><font color=yellow>Linia 1 Coloana 1</font></td>
<tr><td bgcolor=red rowspan=2>Linia 2 Coloana 1</td>
<td bgcolor=cyan>Linia 2 Coloana 2</td></tr>
<tr>
<td bgcolor=magenta >Linia 3 Coloana 2</td></tr>
<tr>
<td bgcolor=indigo colspan=2> <font color=yellow>linia 4 coloana 1</font></td>
</tr>
</table>
</font>
</body>
</html>

___________________________________________________

HTML 9

Din nou despre panouri

Vom realiza aceeași structură ca în lecția precedentă, cu deosebirea că nu vom utiliza tabele, ci panouri.
Fiecare panou are nevoie de un fișier html existent, dar diferite panouri pot accesa același fișier. Pentru simplitate, vom utiliza fișierul creat în lecția anterioară, pe care îl denumim tabel.html. Fișierul care implementează structura de frame-uri va fi următorul:

<html>
<frameset rows="30%,40%,*">
<frame src="tabel.html">
<frameset cols="30%,*">
<frame src="tabel.html">
<frameset rows=50%,50%>
<frame src=tabel.html>
<frame src=tabel.html>
</frameset>
</frameset>
<frame src="tabel.html">
</frameset>
</html>

____________________________________________________

HTML 10

Formulare

Formularele sunt folosite în scopul colectării datelor introduse de utilizator.
Structura generală a unui formular este următoarea:

<form>
.
elemente de formular
.
</form>

Elementele unui formular

Cel mai important element este elementul <input>. Ele are mai multe funcții, depinzând de atributul type. Cele mai utilizate atribute sunt type=text și type = submit.

Exemplul 1:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Exemplul 2:

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

input type = text definește o casetă unde utilizatorul poate introduce un text, cum ar fi username.
input type = submit definește un buton care în momentul când se face click pe el, trimite datele introduse către pagina specificată în atributul form action. În cazul din exemplu, datele sunt trimise către pagina action_page.php.
input name=firstname definește numele câmpului de date. Acest nume al câmpului de date funcționează ca un nume de variabilă pentru pagina apelată action_page. Această pagină va accesa valoarea introdusă de utilizator prin intermediul numelui câmpului.
input value = Mickey definește o valoare implicită pentru această casetă text. În cazul în care utilizatorul nu scrie nimic aici, caseta primește valoarea value.
Pagina apelată de atributul form action trebuie să interpreteze datele transmise ei prin câmpurile text și să le prelucreze în funcție de necesitățile aplicației.

Pagina action_page este de un tip special, nu este o pagină html ci este o pagină php. Tehnica scrierii paginilor php nu face obiectul acestui curs. Pentru a putea scrie pagini php este necesar să existe în calculator un software special care implementează funcțiile unui server de internet. O pagină php se poate scrie totuși pe orice calculator cu un editor de texte obișnuit, și apoi se poate uploada pe un server, unde poate fi executată.

____________________________________________________

HTML 11

Elemente de styling CSS

Prin Styling se înțelege tehnica de aplicare automatizată a formatărilor asupra unuia sau mai multor elemente de conținut dintr-o pagină HTML. CSS înseamnă Cascading Style Sheets și este o tehnică bazată pe un limbaj și o sintaxă proprie.

Sunt trei nivele în care putem aplica o formatare CSS:

inline, sau punctual, cu efect doar asupra unui singur element (tag) dintr-un fișier HTML;
intern, cu efect asupra unui singur fișier HTML, prin folosirea tagului <style>;
extern, cu efect asupra mai multor fișiere HTML.

CSS Inline

Se folosește sub formă de atribut inclus în corpul unui tag, de forma
<tag style="atribut:valoare; atribut:valoare;">

exemplu:

<html>
<body>

<h1 style="color:blue;">Paragraf albastru</h1>
<h2 style="background-color:lightgrey;color:red;text-align:center">Paragraf roșu pe fond gri</h1></body>

</html>

____________________________________________________

HTML 12

Internal Styling (Internal CSS)

Se definește prin tagul <style> plasat în interiorul secțiunii head a paginii html, între <head> și </head>.

Un set de reguli CSS constă dintr-un selector și un bloc de declarații:

h1 {color:blue; fonty-size:12px;}

unde:
h1 = selector
color = proprietate
blue = valoare

efectul este că toate elementele html din pagină de tipul selectorului vor avea aspectul setat prin declarațiile asociate lui.

exemplu:

<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

_________________________________________________

HTML 13

External Styling

Codul CSS cuprins între tagul <style> și </style> se mută într-un fișier separat cu extensia css. Acest fișier este apelat de pagina HTML. Pentru aceasta, în secțiunea <head> se introduce un tag special de legătură, numit link, ca în exemplul următor:

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Conținutul fișierului CSS apelat este următorul:

Pagini

Html

HTML 1

HTML 2

Exerciții

_________________________________________________________

HTML 3

HTML 4

Obiective: realizarea unei hiper-legături

_________________________________________________________

HTML 5

HTML 7

FRAME

__________________________________________________________

HTML 8

___________________________________________________

HTML 9

____________________________________________________

HTML 10

Formulare

____________________________________________________

HTML 11

Elemente de styling CSS

CSS Inline

____________________________________________________

HTML 12

Internal Styling (Internal CSS)

_________________________________________________

HTML 13

External Styling

<style>body {background-color:lightgrey;}h1 {color:blue;}p {color:green;}</style>

În acest fișier CSS se definesc formate pentru:

- elementul body: culoare gri pentru fundal;

- elementul h1 (header 1): culoare literă albastru;

- paragraf: culoare literă verde.

Efectul este afișarea paginii în browser în felul următor:

This is a heading

____________________________________________________

Niciun comentariu:

Trimiteți un comentariu

<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>