Sunteți pe pagina 1din 5

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>