Sunteți pe pagina 1din 14

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>
<a href="#primus">Înapoi</a>
<a href="#primus">Înapoi</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> </CENTER> Centrează materialul în pagină

<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

BORDERCOLORLIGHT Cea mai deschisă culoare din cele două culori


= 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=aliniere middle (în mijloc), bottom (jos), left (în stânga), right (la
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
ă &#259;
Ă &#258;
â &#226;
 &#194;
î &#238;
Î &#206;
ş &#351;
Ş &#350;
ţ &#355;
Ţ &#354;