Notite

Crearea paginilor Web cu ajutorul editorului Notepad
Paginile web sunt scrise într-un limbaj numit HTML (HyperText Markup
Language). HTML permite utilizatorilor să realizeze pagini care includ texte, grafică şi
indicatori la alte pagini de Web. Pentru realizarea documentelor HTML pot fi utilizate
editoare simple de text (Notepad pentru Windows sau Joe în Linux) sau editoare create
special pentru paginile web, editoare ce pot dispune de funcţii sofisticate pentru partea
vizuală (WYSIWYG - What You See Is What You Get) sau pentru verificarea
legăturilor în întregul site.
Lansarea editorului este realizată în funcţie de tipul de editor ales. Spre exemplu,
dacă a fost ales:
- Notepad, programul va fi lansat din meniul Start-Programs-Accessories-Notepad.
- Word, lansarea acestuia are loc, de exemplu, pe calea Start-Programs-Microsoft
Office-Microsoft Office Word.
Odată lansat editorul, pagina va fi redactată folosind sintaxa HTML şi va fi salvată cu
extensia “html”
Interfaţa editoarelor HTML
Notepad
Microsoft Notepad (popular MS Notepad sau simplu Notepad) este un editor simplu de
text, inclus în sistemul de operare Windows de la Microsoft, începând din 1985 cu
Windows 1.0 Are puţine funcţii pentru formatarea textului, fiind un editor de text în clar,
dar poate lucra cu caractere ASCII, ISO şi/sau Unicode). Extensia implicită de stocare a
fişierelor create cu Notepad este .txt. Textul în clar pe care îl foloseşte îl face să fie un
editor cu fişiere suportate pe toate sistemele de operare, deoarece nu are nevoie de
reformatarea textului la deschidere.
Dreamweaver
Macromedia Dreamweaver este o unealtă destinată creatorilor de pagini web.
Dreamweaver a fost creat de Macromedia (acum Adobe Systems) şi momentan a ajuns
la versiunea 10. Primele versiuni ale produsului serveau doar ca simple editoare HTML
de tipul WYSIWYG dar în versiunile recente au fost implementate funcţii de editare
avansate şi support pentru alte tehnologii web cum ar fi CSS, JavaScript etc.
Dreamweaver s-a bucurat de un larg succes încă de la sfârşitul anilor '90 şi momentan
deţine aproximativ 80% din piaţa editoarelor HTML. Produsul poate fi rulat pe variate
platforme software: Mac, Windows, dar suportă în acelaşi timp şi platforme UNIX cu
ajutorul unor emulatoare software, cum ar fi Wine.
Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare a
paginilor HTML, făcând astfel posibilă crearea cu uşurinţă a paginilor web de către
utilizatorii neexperimentaţi. (sursa: http://ro.wikipedia.org/wiki/Dreamweaver)
Crearea unei pagini web in html
O pagină web are în componenţa două elemente de bază.

<html>
<body>
Continutul paginii va fi aici
</body>
</html>
Primul tag se numeste <html> şi este cel care îi spune browser-ului că a început
un cod în HTML. Cel de-al doilea tag, <body>, spune browser-ului că aici începe partea
vizibilă sau conţinutul paginii HTML.
Tag-urile </body> şi </html> sunt tag-uri de închidere. </body>, dă de ştire
browser-ului, că s-a încheiat conţinulul pagini, iar </html> că s-a încheiat documentul
HTML.
Slesh "/" este pus înaintea numelui tag-ului şi spune browserului că ar dori să încheie
respectiva funcţie. Deci <tag> este folosit pentru a începe o funcţie, iar </tag> pentru a
o încheia.
Ordinea deschiderii şi a închiderii tag-urilor este foarte importantă. Dacă un
tag este deschis într-un altul, de exemplu body este deschis în html atunci acel tag
(body) este cel care trebuie închis înaintea celui de-al doilea tag (html).
Am închis mai întâi body pentru că a fost cel care s-a deschis cel mai recent. Această
regulă şi anume deschiderea şi închiderea tag-urilor se aplică la toate celelalte taguri
ale documentelor HTML.
<head>
Acest tag urmează imediat după <html> şi este folosit pentru a indica browser-ului,
informaţii utile precum: titlul pagini, conţinutul (folosit de motoarele de căutare vechi) şi
multe altele
<title>
Se pune între <head> şi </head>. Acest tag este cel care dă numele pagini. Numele va
fi afişat în browser, de obicei în partea stângă sus.
<h2>
Acesta este titlul care apare în pagină, înainte de conţinut şi va fi mai mare decât litera
de conţinut. <h2> înseamnă că e cea de-a doua mărime a literei între cele şase care
există. <h1> este cea mai mare iar <h6> va fi cea mai mică.
<p>
Este tag-ul care marchează deschiderea şi încheierea unui paragraf. Aşa că atunci
când vei începe un paragraf asigură-te că ai pus <p> la început şi </p> la sfârşit.
Inserarea şi formatarea unui text:
Tag-ul <P>
- permite introducerea unui paragraf
Dacă scriem un text între tag-urile <P> şi </P>, atunci textul va fi încadrat de câte un
rând liber.
Exemplu:
<html>
<body>
<p>Acesta este un paragraf obişnuit.</p>
<p>Un rând al unui paragraf are lăţimea ferestrei afişata de browser. Dacă micşorăm
fereastra browser-ului acelaşi paragraf va ocupa mai multe rânduri.</p>
<p>Dacă două cuvinte ale unui paragraf sunt separate prin mai multe spaţii browser-ul
afişează doar un singur spaţiu.</p>
</body>
</html>
Culoare
Pentru a schimba culoarea textului, fundalului, etc., aveţi nevoie de şase cifre de cod
precedate de simbolul "#" (diez). Codul are forma "#RRGGBB" unde RR reprezintă
intensitatea culorii roşu (RED) în culoarea rezultată, GGintensitatea culorii
verde (GREEN), şi BB intensitatea culorii albastru (BLUE).
Inserarea unei imagini
Formatele de imagini utilizate în paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif),
BMP (*.bmp), PNG (*.png).
Formatul gif este recomadat pentru realizarea butoanelor şi a icoanelor iar jpg pentru
fotografii.
Eticheta folosită pentru inserarea unei imagini în pagină este <img> şi are următoarele
atribute:
src = sursa, locul unde se află imaginea
width = lăţimea imaginii
height = înălţimea imaginii
alt = numele care înlocuieşte imaginea până aceasta se încarcă sau când nu a fost
găsită
border = chenar (0 = lipsă bordură)
Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red
flower jpg">
Fundaluri în HTML (HTML Background)
Backgrounds (Fundaluri)
Tag-ul <body> are două atribute prin care i se poate specifica folosirea unui fundal.
Fundalul poate fi atât o imagine cât şi o culoare.
Bgcolor
Atributul bgcolor specifică o culoare de fundal a unei pagini HTML.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
Atributul background specifică o imagine drept fundal pentru o pagină HTML. Valoarea
acestui atribut este URL-ul imaginii care se doreşte a se folosi. Dacă imaginea este mai
mică decât fereastra browser-ului atunci ea se va repeta de oricâte ori va fi nevoie
pentru a umple fereastra browser-ului.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
Ce este un link (hyperlink)?
Link-ul (engleză: hyperlink), este o referinţă către un document sau parte a unui

document
Link-ul este definit cu etichetele <a> şi </a> şi are atributele:
href - adresa fişierului destinaţie
target - în ce fereastră se va deschide fişierul destinaţie
title - o mică descriere asociată legăturii afişată în momentul în care mouse-ul se află
deasupra legăturii
Link-ul în paginile Internet

<a title=”Tutorial HTML ” href=”http://www.competentedigitale.ro/HTML/”>Tutorial HTML
</a>
Legătură spre e-mail:

<a href=mailto:maria@yahoo.com”>Legatura spre e-mail-ul Mariei</a>
legătură pe o imagine?
<html>
<body>
<p>Legătură pe o imagine:
<a href="http://www.competentedigitale.ro/HTML/">
<img src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>Imagine legătură fără bordură:
<a href="http://www.competentedigitale.ro/HTML/">
<img border="0" src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Anchors (ancore)
Ancorele sunt folosite pentru a lega două sau mai multe secţiuni ale aceleiaşi pagini.
<h1 align="center" id="primus">Fotografii Israel </h1>
<ol>
<li><a href="#1">Fotografia 1 </a></li>
<li><a href="#2">Fotografia 2 </a></li>
</ol>
<a name=1><center><img src="f1.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=2><center><img src="f2.JPG" width=70% height=60% ></center></a>
Realizarea tabelelor în HTML
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe
lângă crearea propriu-zisă a tabelelor, putem controla mult mai bine poziţionarea
elementelelor în cadrul paginilor web.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> şi </TABLE>. Tot ce va fi
scris între aceste tag-uri va forma un tabel. După tag-ul <TABLE> urmează tag-
ul <TR> care vine de la "Table Row" (rândul tabelului) şi reprezintă introducerea unui
rând în cadrul tabelului. Tot ce va fi scris între tag-urile <TR> şi </TR> va forma un rând
al tabelului. După crearea unui rând, trebuie să adăugăm în cadrul acestuia, câteva
celule, cu ajutorul tag-urilor <TD> şi </TD>.
Exemplu:
<table border="1">
<tr>
<td>mere</td>
<td>1,5 RON</td>
</tr>
<tr>
<td>banane</td>
<td>5 RON</td>
</tr>
</table>
Marcaje de bază
<HTML> </HTML> Defineşte un fişier în format Web
<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Tilul documentului

<BODY> </BODY> Corpul paginii HTML
BGCOLOR = culoare Culoarea de fond a paginii
TEXT=culoare Culoarea textului pe pagină
LINK=culoare Culoarea legăturiilor nevizitate din pagină
VLINK=culoare Culoarea legăturiilor vizitate din pagină
ALINK=culoare Culoarea legăturiilor pe durata clicului executat de utilizator
BACKGROUND = url Imaginea de fond pentru pagină
<P> Paragraf
<Hn> <Hn> Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT> Specifică atribute ale textului încadrat
SIZE=n Dimensiunea textului este 1-7
FACE="a,b" Specifică fontul: a, dacă este disponibil, sau b
COLOR=s Culoarea textului: fie un nume de culoare, fie o valoare RGB
<BR> Linie nouă
<PRE> </PRE> Informaţie preformatată
 Comenatriu HTML
<CENTER>
Centrează materialul în pagină
</CENTER>
<HR> Riglă orizontală
SIZE=x Înălţimea riglei în pixeli
WIDTH=x Lăţimea riglei în pixeli sau în procente
NOSHADE Dezactivează afişarea umbrei pentru rigla orizontală
ALIGN=x Alinierea riglei orizontale în pagina (left, center, right)
COLOR=x Culoarea riglei orizontale (numai pentru IE)
<A> </A> Marcaj de tip ancoră
HREF=url Referinţă hipertext
HREF=#nume Referinţă către o ancoră internă

Name=nume Definiţia unei ancore interne
<sup></sup> Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup>
<sub></sub> Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O

Marcaje pentru liste
<DD> Descriere definiţie
<DL> </DL> Lista de tip definiţie
<DT> Termen de definiţie
<LI> Element de listă
<OL> Listă ordonată (numerotată)
TYPE=tip Tipul numerotării. Valori posibile: A, a, I, i, 1
START=x Numărul de început al listei ordonate
<UL> Listă neordonată (marcată)
TYPE=formă Forma marcajului. Valori posibile: circle, square, disc.

Formatarea caracterelor
<B> </B> Afişează text cu caractere aldine
<I> </I> Afişează text cu caractere cursive
<U> </U> Afişează text subliniat
<TT> </TT> Text cu font monospaţiu
<CITE> </CITE> Citare bibliografică
<CODE> </CODE> Listing de program
<EM> </EM> Stil logic de evidenţiere
<KBD> </KBD> Text de la tastatură
<STRONG> </STRONG> Evidenţiere logică puternică
<VAR> </VAR> Program sau variabilă
<BASEFONT SIZE = n> Specifică dimensiunea implicită a fontului din pagină

Marcaje pentru cadre
<FRAMESET>
Definirea redactării paginii
</FRAMESET>
COLS=x Numărul şi mărimea relativă a coloanelor
ROWS=x Numărul şi mărimea relativă a liniilor
Specifică starea "on" (activă) sau "off"

BORDER=x (inactivă) pentru chenarul cadrului
FRAMESET (1 sau 0)
FRAMEBORDER = x Specifică mărimea chenarului
FRAMESPACING = x Mărimea spaţiului dintre două cadre adiacente
<FRAME> Definiţia unui anumit cadru
SRC=url URL-ul sursă pentru cadru
Numele cadrului (utilizat împreună cu

NAME=nume TARGET=nume ca parte componentă a
marcajului de tip ancoră<a>
Defineşte opţiunea barei de derulare.Valori

SCROLLING=scrl posibile: on(activă), off(inactivă), auto
(automat)
FRAMEBORDER=x Mărimea chenarului din jurul cadrului
Spaţiul suplimentar de deasupra şi dedesubtul

MARGINHEIGHT=x
unui anumit cadru
Spaţiu suplimetar la stânga şi la dreapta unui

MARGINWIDTH=x
anumit cadru
<NOFRAMES> Secţiunea de pagină afişată pentru utilizatorii

</NOFRAMES> care nu pot vedea un cadru
<IFRAME> Cadru intern (numai pentru IE)
SRC=url Sursa cadrului
NAME=s Numele ferestrei (util pentru TARGET)
HEIGHT=x Înăţtimea cadrului înglobat
WIDTH=x Lăţimea cadrului înglobat

Marcaje pentru tabele
<TABLE> </TABLE> Tabel HTML
BORDER=x Chenarul tabelului
Spaţiul suplimentar în cadrul celulelor

CELLPADDING=x
tabelului
CELLSPACING=x Spaţiul suplimentar între celulele tabelului
WIDTH=x Lăţimea impusă tabelului
FRAME=valoare Ajustarea fină a tabelului
RULES=valoare Ajustarea fină a riglelor tabelului
BORDERCOLOR =
Specifică culoarea chenarului tabelului
culoare
BORDERCOLORLIGH Cea mai deschisă culoare din cele două culori

T = culoare specificate
BORDERCOLORDARK Cea mai închisă culoare din cele două culori

= culoare specificate
Aliniază tabelul la marginea din stânga a

ALIGN=left
paginii, iar textul curge în partea dreaptă
Aliniază tabelul la marginea din dreapta a

ALIGN=right
paginii, iar textul curge în partea stângă
Spaţiu suplimetar pe orizontală în jurul

HSPACE=x
tabelului
VSPACE=x Spaţiu suplimetar pe verticală în jurul tabelului
COLS=x Specifică numărul de coloane ale unui tabel
<COLGROUP> Defineşte un set de definiţii de coloane cu

</COLGROUP> ajutorul marcajului <col>
Defineşte lăţimea unei coloane exprimată în

<COL WIDTH=x>
pixeli
<THEAD> </THEAD> Defineşte titlul tabelului
<BODY> </TBODY> Defineşte corpul tabelului
<TR> </TR> Linie de tabel

BGCOLOR=culoare Specifică culoarea de fond pentru întreaga linie
Alinierea celulelor de pe linia curentă (left,

ALIGN=aliniere
center, right)
<TD> </TD> Celula de date a tabelului
Specifică culoarea de fond pentru celula de

BGCOLOR=culoare
date
Numărul de coloane pe care se întinde celula

COLSPAN=x
curentă de date
Numărul de linii pe care se întinde celula

ROWSPAN=x
curentă de date
Alinierea materialului din cadrul celulei de

ALIGN=aliniere
date.Valori posibile: (left, right, center)
Alinierea pe verticală a materialului din cadrul

VALIGN=aliniere celulei de date.Valori posibile: (top, bottom,
middle)
Specifică imaginea de fond pentru celula

BACKGROUND=url
tabelului
Nu permite despărţirea textului pe linii în

NOWRAP
cadrul unei celule
Aliniază celule de date cu linia de bază a

ALIGN=baseline
textului adiacent
Aliniază o coloană faţă de un anumit carcater

ALIGN=caracter
(caracterul prestabilit este ".")
Aliniază atât marginea din stânga cât şi

ALIGN=justify
marginea din dreapta a unui text
Adăugarea imaginilor
<IMG > Marcajul de introducere a imaginilor
SRC=url Sursa fişierului grafic
ALT=text Textul alternativ de afişat, dacă este necesar
Alinierea imaginii în pagină. Valori posibile: top (sus),

ALIGN=alinier
middle (în mijloc), bottom (jos), left (în stânga), right (la
e
dreapta)
HEIGHT=x Înălţimea imaginii (în pixeli)
WIDTH=x Lăţimea imaginii
Chenarul din jurul imaginii, atunci când aceasta este

BORDER=x
utilizată ca hiperlegătură
Spaţiul suplimentar pe orizontală din jurul imaginii (în

HSPACE=x
pixeli)
Spaţiul suplimentar pe verticală din jurul imaginii (în

VSPACE=x
pixeli)
Tabel diacritice
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea
acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
Â â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.
valoare cod
ă ă
Ă Ă
â â
Â Â
î î
Î Î
ş ş
Ş Ş
ţ ţ
Ţ Ţ

Notite

Î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

Notite

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea paginilor Web cu ajutorul editorului Notepad

Interfaţa editoarelor HTML

O pagină web are în componenţa două elemente de bază.

Inserarea unei imagini

Fundaluri în HTML (HTML Background)

Ce este un link (hyperlink)?

Link-ul (engleză: hyperlink), este o referinţă către un document sau parte a unui

Link-ul în paginile Internet

Legătură spre e-mail:

Realizarea tabelelor în HTML

<HTML> </HTML> Defineşte un fişier în format Web

<HEAD> </HEAD> Antetul documentului

<TITLE> </TITLE> Tilul documentului

BGCOLOR = culoare Culoarea de fond a paginii

TEXT=culoare Culoarea textului pe pagină

LINK=culoare Culoarea legăturiilor nevizitate din pagină

VLINK=culoare Culoarea legăturiilor vizitate din pagină

ALINK=culoare Culoarea legăturiilor pe durata clicului executat de utilizator

BACKGROUND = url Imaginea de fond pentru pagină

<Hn> <Hn> Nivel de subtitlu al documentului (n = 1-6)

<FONT> </FONT> Specifică atribute ale textului încadrat

SIZE=n Dimensiunea textului este 1-7

FACE="a,b" Specifică fontul: a, dacă este disponibil, sau b

COLOR=s Culoarea textului: fie un nume de culoare, fie o valoare RGB

<BR> Linie nouă

<PRE> </PRE> Informaţie preformatată

Comenatriu HTML

<HR> Riglă orizontală

SIZE=x Înălţimea riglei în pixeli

WIDTH=x Lăţimea riglei în pixeli sau în procente

NOSHADE Dezactivează afişarea umbrei pentru rigla orizontală

ALIGN=x Alinierea riglei orizontale în pagina (left, center, right)

COLOR=x Culoarea riglei orizontale (numai pentru IE)

<A> </A> Marcaj de tip ancoră

HREF=url Referinţă hipertext

HREF=#nume Referinţă către o ancoră internă

<sup></sup> Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup>

<sub></sub> Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O

<DD> Descriere definiţie

<DL> </DL> Lista de tip definiţie

<DT> Termen de definiţie

<LI> Element de listă

<OL> Listă ordonată (numerotată)

TYPE=tip Tipul numerotării. Valori posibile: A, a, I, i, 1

START=x Numărul de început al listei ordonate

<UL> Listă neordonată (marcată)

TYPE=formă Forma marcajului. Valori posibile: circle, square, disc.

<B> </B> Afişează text cu caractere aldine

<I> </I> Afişează text cu caractere cursive

<U> </U> Afişează text subliniat

<TT> </TT> Text cu font monospaţiu

<CITE> </CITE> Citare bibliografică

<CODE> </CODE> Listing de program

<EM> </EM> Stil logic de evidenţiere

<KBD> </KBD> Text de la tastatură

<STRONG> </STRONG> Evidenţiere logică puternică

<VAR> </VAR> Program sau variabilă

<BASEFONT SIZE = n> Specifică dimensiunea implicită a fontului din pagină

COLS=x Numărul şi mărimea relativă a coloanelor

ROWS=x Numărul şi mărimea relativă a liniilor

Specifică starea "on" (activă) sau "off"

FRAMEBORDER = x Specifică mărimea chenarului

FRAMESPACING = x Mărimea spaţiului dintre două cadre adiacente