Elemente Pentru Crearea Unei Pagini Web

Elemente pentru crearea unei pagini web
Bosca David
Cls: a 11-a D
1
Cuprins
1.Pagina web
-HTML:
-operații de bază
-formatarea si introducerea textului/imaginilor/tabelelor
-realizarea hiper-legaturilor
-instrumente de baza necesare editarii
2.Editoare
2
Operatii de baza necesare realizarii unei pagini HTML
Paginile web sunt scrise într-un limbaj numit HTML (HyperText Markup Language). Un
program care interpreteaza HTML se numeste program de navigare sau browser (ex.
Microsoft Internet Explorer, Mozilla Firefox, Opera). Pentru a crea un document HTML se
poate utiliza un editor de text simplu (ex. Notepad) sau editoare create special pentru paginile
WEB.
Lansarea editorului Notepad se realizeaza astfel : START-ALL PROGRAMS-

ACCESSORIES- NOTEPAD. Se va deschide o fereastra care are urmatoarele componente:
Pagina trebuie sa fie salvata cu un nume urmat de extensia .html sau .htm. Pentru a salva
documentul cu extensia .html sau .htm se alege din meniul FILE- SAVE AS, care va deschide
fereastra de dialog de mai jos:
Orice document HTML este alcatuit din etichete numite si taguri sau marcaje. Toate
documentele HTML contin etichetele:
3
-<html> si </html> intre care se afla toate etichetele necesare realizarii unei pagini WEB;
-<title> si </title> intre care se afla continutul ce va aparea pe bara de titlu a paginii web;
-<head> si </head> intre care sunt incluse etichetele <title> si </title>;
-<body> si </body> cuprind corpul documentului.
Un text HTML este alcatuit din doua parti:
-un antet (HEAD);
-un corp (BODY), in care se plaseaza etichetele si textul documentului.
Exemplu
e considera secventa de etichete de mai jos:
<html>
<head>
<title>
Exemplu
</title>
</head>
<body>
Exemplu de pagina web scrisa in html.
</body>
</html>
4
Vom salva secventa cu numele exemplu.html, apoi vom da dublu click pe fisier. Vom obtine
fereastra de mai jos:
Pentru a pastra caractere albe (spatiu, tab, enter) in text se folosesc etichetele <pre> si
</pre>, iar pentru a trece pe un nou rand se foloseste eticheta <br>.
Rezolvati
1.Creati o pagina web care sa contina o poezie scrisa de George Cosbuc. In bara de titlu
trebuie sa apara titlul poeziei.
2.Faceti modificarile necesare in sursa de mai jos, pentru a obtine o pagina cu dispozitivele
scrise unul sub altul:
<html>
<head>
<title>
Dispozitive
</title>
</head>
</body>
</html>
5
Inserarea si formatarea tabelelor html
1.Inserarea unui tabel. Pentru a insera un tabel se folosesc etichetele <table> si </table>.

Fiecare linie din tabel este descrisa cu etichetele <tr> si </tr>, iar continutul fiecarei celule din
tabel este cuprins intre etichetele <td> si </td>. Pentru ca liniile de delimitare din tabel sa fie
vizibile se foloseste argumentul border=numar.
Exemplu. Secventa de mai jos creaza tabelul din imagine.

<html>
<head>
<title>aplicatie </title>
</head>
<body>
<table border=2>
<tr><td>luna</td><td>temperatura maxima</td></tr>
<tr><td>iulie</td><td>30</td></tr>
<tr><td>august</td><td>28</td></tr>
</body>
</html>
6
2.Modificarea fundalului: tabelului se realizeaza folosind atributul bgcolor in cadrul etichetei
<table>, randului se realizeaza folosind atributul bgcolor in cadrul etichetei <tr>, celulei se
realizeaza folosind atributul bgcolor in cadrul etichetei <td>.
Exemplu. Secventa de mai jos creaza tabelul din imagine:
<HTML>
<HEAD>
<TITLE>APLICATIE </TITLE>
</HEAD>
<body bgcolor=yellow>
<table border=2 bgcolor=yellow>
<tr bgcolor=pink><td>luna</td><td>temperatura maxima</td></tr>
<tr><td>iulie</td><td>30</td></tr>
<tr><td bgcolor=green>august</td><td>28</td></tr>
</body>
</HTML>
7
Modalitati de a realiza o hiper-legatura
O legatura reprezinta o trimitere de la un text sau imagine la o alta pagina web, o alta pagina
de pe calculatorul propriu sau la adrese de pe Internet.
1.Crearea unei legaturi pe text se realizeaza folosind eticheta: <a href= nume.html> click
aici</a>.
2.Crearea unei legaturi pe o imagine se realizeaza folosind eticheta: <a href=nume.html> <img
src=nume fisier imagine> </a>.
3.Crearea unei legaturi spre www se realizeaza folosind eticheta: <a
href=http://www.google.ro> Google </a>.
Exemplu
<HTML>
<HEAD>
<TITLE>APLICATIE </TITLE>
</HEAD>
<body>
<a href= aplicatie.html> click aici</a>
<a href=aplicatie1.html> <img src=imagine.jpeg> </a>
<a href=http://www.google.ro> Google </a>
</body>
</HTML>
8
Instrumente de baza necesre editarii
Fiecare site este format din mai multe pagini web. Paginile web sunt create cu ajutorul unor
programe web. Sunt mai multe programe cu care se pot crea pagini web, chiar fara a
cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web.
Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din
codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus
ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului
HTML. Dintre editoarele de text cunoscute cel mai folosit este NotePad care este intalnit pe
toate calculatoarele care au instalat sistemul de Operare Windows, dar poate fi utilizat orice
editor de text. Pentru începatori si pentru usurinta cu care se lucreaza, eu recomand folosirea
aplicatie NotePad sau Notepad++, dar cei avansati pot folosi si altele cum ar fi Dreamweaver.
sau alte editoare avansate. Anumite programe web cauzeaza anumite probleme web. Cam
asta este legatura intre cele trei. Dar sa detaliem.
Pagina web este unitatea de baza a internetului. Fiecare informatie, imagine, clip, s.a.m.d
este cuprinsa intr-o pagina web.
Paginile web se impart in trei categorii:
 pagini web statice. Numele spune totul. Si anume, sunt paginile in care nimic nu se misca,
nimic nu se transforma, nici o culoare cand ajungi cu mouse-ul pe un link, nimic. Sunt
scrise exclusiv in limbaj HTML si sunt stramosii paginilor moderne. Astfel de pagini sunt
inca folosite pentru timpul de incarcare mic. Ulterior a fost adaugat CSS-ul, un “upgrade” al
HTML-ului.
 pagini web cu continut dinamic. Sunt paginile care “traiesc”, reactioneaza la miscarile
vizitatorului. Ca meniul pe care il vezi deasupra. Sunt paginile in care continutul se
schimba, fara sa incarce o noua pagina. Pentru acestea avem nevoie de alte limbaje de
programare: Java, Javascript, Ajax, XML, ActionScript si eventual extensii ale acestora:
jQuery, MooTools, etc.
 pagini web create dinamic. Arata la fel ca celelalte, ca design se incadreaza in primele
doua categorii. Diferenta consta in modul in care sunt create:
o la o pagina statica, vizitatorul cere un site, comanda ajunge la server, server-ul
returneaza pagina.
o la o pagina diamica, comanda ajunge la server, server-ul extrage informatia
necesara din baza de date, o introduce intr-o pagina statica ce foloseste drept
sablon, apoi pagina este livrata vizitatorului.
Acest gen de programare foloseste limbaje precum asp, perl, python, ruby, cel
mai raspandit fiind php. Mai complicat, insa prezinta o serie de avantaje:
9
Editoare HTML
Sunt mai multe programe prin care se pot crea pagini web, chiar fara a cunoaste limbjul HTML, cum
sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text simple sunt programele de baza, si cele mai folosite, pentru editarea paginii web.
Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din codurile
invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus ocupa foarte putin
spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad (sau NotePad++), care este folosit si
pentru acest curs, dar poate fi utilizat orice editor de text. Pentru începatori si pentru usurinta cu care
se lucreaza, eu recomand folosirea aplicatie Notepad++.
1. Crearea bazei de început a unui document

HTML contine elemente sigure, generale, care sunt necesare pentru crearea unui document
HTML.
Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Aceasta
este:
<!DOCTYPE html>
<html>
<head>
<title> Titlul </title>
</head>
<body>
<h1>Titlu afisat in pagina</h1>
Continut
</body>
</html>
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.

In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un
text reprezentativ ca titlu al documentului dv.; si in BODY titlul care va fi afisat in pagina (in
tag <h1>) si un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor).
La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat mai bine
obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe portaluri de
cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi
afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pagina:
10
<!DOCTYPE html>
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>
</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>
 Paginile web sunt scrise intr-un limbaj numit HTML (Hyper text Markup Language)
 Pentru realizarea documentelor HTML pot fi utilizate editoare simple de precum Notepad, caz
in care trebuie cunoscut limbajul HTML, sau editoare create special pentru paginie web.
 Exemple de editoare HTML: Front Page, Dreamwaver.
 Pagina web poate fi publicata pe un server Web (computer care gazduieste pagini Web si
raspunde la cererile Browser-elor; cunoscut si ca server HTTP, un server Web socheaza
fisierele ale caror URL-uri incep cu http://.)
11

Elemente Pentru Crearea Unei Pagini Web

Î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

Elemente Pentru Crearea Unei Pagini Web

Încărcat de

Drepturi de autor:

Formate disponibile

Elemente pentru crearea unei pagini web

Lansarea editorului Notepad se realizeaza astfel : START-ALL PROGRAMS-

-<head> si </head> intre care sunt incluse etichetele <title> si </title>;

-<body> si </body> cuprind corpul documentului.

Un text HTML este alcatuit din doua parti:

-un antet (HEAD);

-un corp (BODY), in care se plaseaza etichetele si textul documentului.

e considera secventa de etichete de mai jos:

Exemplu de pagina web scrisa in html.

1.Inserarea unui tabel. Pentru a insera un tabel se folosesc etichetele <table> si </table>.

Exemplu. Secventa de mai jos creaza tabelul din imagine.

<table border=2 bgcolor=yellow>

<tr bgcolor=pink><td>luna</td><td>temperatura maxima</td></tr>

<a href= aplicatie.html> click aici</a>

<a href=aplicatie1.html> <img src=imagine.jpeg> </a>

<a href=http://www.google.ro> Google </a>

1. Crearea bazei de început a unui document

Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.

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