Codul HTM

Crearea unui SITE
Pentru realizarea unui Site professional se stabileste planul de creare care con sta in:
1. Studiu de oportunitate:
stabilirea obiectivelor, mai exact a tipului de site (informational, de comunicare sau de colaborare);
stabilirea beneficiarilor;
segmentarea viitorilor utilizatori;
2. Proiectarea functionala detaliata
Organizarea continutului si serviciilor; arborescenta site -ului
Definirea interfetei site-ului:
structura ecranului si principiile de navigare
descrierea paginilor Site-ului
3. Conceptia grafica si editoriala
Macheta grafica
Ghid de redactare a continutului
4. Specificatii tehnice; definirea restrictiilor proiectului:
Functionale
Tehnice
Grafice
5. Realizarea prototipului
Concluzii: Pentru crearea unui Site trebuie tinut cont de:
Beneficiar
Utilizatori
Posibilitati
Structura ecranului adecvata tipului de Site
Institutional
Comercial
Limbajul HTML
Cea mai mare parte a informatiilor de World Wide Web constau in documente multimedia elaborate, scrise
in HTML.Exemple de limbaje folosite in realizarea unui site:
HTML
JSP (Java Server Pages)
JavaScript, etc
Limbajul HTML (HyperText Markup Language) este un limbaj de marcare hipertext alcatuit dintr -un set
de coduri speciale care se insereaza intr -un text, pentru a adauga informatii despre formata re si despre
legaturiPentru editarea unui document HTML trebuie parcursi urmatorii pasi:
PAS 1: Editarea fisierului HTML cu ajutorul unui edi tor de texte; de obicei Notepad
PAS 2: Salvarea fisierului editat folosind extensia .html sau .htm (Atentie la alegerea tipului de fisier de
salvat:File/Save as/ Save as type: All files!)PAS 3: Vizualizarea paginii cu ajutorul unui browser. In
Internet Explorer, in campul Address dati calea si numele fisierului (de exemplu scriu optional file:\\ urmat
de C:\HTML\exemplul1.html am salvat fisierul exemplul1.html pe C in directorul creat HTML)
ATENTIE: pot aparea diferente la vizualizarea paginii in functie de browserul folosit!!!!
Un document HTML este o succesiune de blocuri; blocurile dintr-un document HTML pot fi incluse
unele in altele
Un bloc este delimitat de marcaje speciale ce sunt incluse intr < si> si transmit comenzi catre browser
pentru a afisa pagina intr-un anumit mod.
Unele blocuri prezinta delimitator de sfarsit de bloc (/), in timp ce p entru altele acest delimitator este
optional sau chiar interzis. Nu este case-sensitive.
Structura unei etichete:
<nume [atribut_1=valoare_1 .. atribut_n=valoare_n]>
In final, daca este un bloc ce se inchide apare: </nume>
Un document HTML standard consta dintr-un bloc <html>..</html> care include alte doua sub -blocuri:
<head>..</head> si <body>..</body>. Primul sub -bloc contine informatii generale (titlul paginii),iar
ultimul sub-bloc contine informatiile propriu-zise din pagina.
. Pentru un stil mai elegant este bine ca pagina sa aiba si titlu. Acesta va fi dat de etichetele <title>..</title>
ce vor fi inserate in blocul <head>..</head>. Daca blocul <title> lipseste, atunci in bara de titlu va aparea
numele fisierului.
Unele etichete au anumite atribute carora le putem atribui anumite valori. Sintaxa este urmatoarea:
<eticheta atribut1=valoare, atribut2=valoare > (</eticheta>) Atributele unei etichete sunt valabile in
corpul acelei etichete, apoi se revine la atributele implicite.
Exemplul 1
Sa se creeze o pagina de web cu titlul Exemplul1 (salvata ca exemplul1.html) care sa contina text avand
caracteristici diverse (diferite culori, marimi de text etc), in care sa se foloseasca paragrafe. Culoarea
paginii sa fie galbena.
<html>
<head> <title>
Exemplul 1
</title> </head>
<body bgcolor=yellow>
<basefont size=2>
Cerinta este de a scrie un text avand atribute diferite.
<br>
Astfel voi scrie:
<p>
1.
<font color="blue", size="4", face="arial", weight="300">
Acesta este un text colorat, <u> cu zone subliniate </u>, mai mare ca fontul de baza, alt stil si mai gros.
</font></p>
<p>
2.
<font color="green", size="6", weight="500"><blink>
Acesta este un text colorat, mai mare, si mai gros si care clipeste.
</blink></font></p>
<pre>
<font size=3>
In aceasta zona se va scrie exact ca in codul sursa, tinandu -se seama de spatii.
Iata un "robotel" rosu!
</font>
<font color="red", size="7",>
(00)
\/ || \/
||
- -
</font> </pre></body>
</html>
EXEMPLUL 2:
Sa se creeze o pagina web cu titlul Exemplul2 (salvata ca exemplul2.html) care sa contina 2 liste una
ordonata si una neordonata, 2 titluri intermediare, fiecare despartit de text de o linie avand caracteristici
diferite.
<html> <head> <title>
Exemplul 2
</title> </head>
<body leftmargin=10, topmargin=10>
Cerinta este de a crea o pagina web ce contine liste.
<h4> <u>
Lista neordonata:
</u></h4>
<hr>
<ul type=square>
<li> Elementul 1;
<li> Elementul 2;
<p><li type=circle> <font color="magenta"> Element special. </font></p>
</ul>
<h3>
Lista ordonata:
<hr align="right", size="7", width="75%">
</h3>
<ol type="I", start=4>
<li> Element;
<li> Element;
</ol>
<address>
Pagina facuta pentru a arata constructia listelor.
</address> </body>
</html>
Dupa cum se observa in aceste doua exemple etichetele se pot folosi si una in interiorul celeilalte, dar
trebuie avut grija sa le inchidem in ordine inversa. Pe baza tabelului de la sfarsit se poate crea o pagina
web ce contine text in diverse for me, titluri, liste etc
EXERCITIU:
Sa se creeze o pagina de web cu titlul Prima mea pagina de web (salvata ca exemplul3.html) care sa fie o
imbinare a celorlalte 2 exemple, dar imbunatatite.
Crearea tabelelor:
Pentru crearea tabelelor se foloseste etich eta <table>..</table> cu atributele sale. (vezi tabelul de la
sfarsitul lectiei).
Inserarea imaginilor:
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele
imagine sunt cele cu extensia: .gif, .jpeg (.jp g), .xmp, .xbm, .bmp (doar Internet Explorer), .dib, .tif (.tiff),
.pcx, .png.
Adresa URL (Uniform Resource Locator) este un standard folosit in identificarea unica a unei surse de
Internet. Pentru inserarea unei imagini se utilizeaza eticheta <img> cu at ributele sale (vezi tabelul de la
sfarsitul lectiei). Pentru ca o imagine sa fie incarcata trebuie specificata calea sau trebuie sa fie salvata in
acelasi director. Imaginile pot fi introduse si in celulele unui tabel
Crearea legaturilor:
Legaturile (link-urile) reprezinta partea cea mai importanta a unei pagini web. Ele transforma un text
obisnuit in hipertext. Lucrurile stau in felul urmator:
- in pagina HTML se insereaza legaturi prin intermediul etichetei speciale <a> si a unui atribui href care ia
valoarea adresa URL a resursei solicitate (<a href="www.yahoo.com> zona activa </a>)
- In pagina web apar legaturile ca zone active. Cand mouse -ul se afla deasupra zonei, cursorul mouse -ului
ia forma unei maini.
- Efectuand click pe o zona activa, brows erul trimite catre server o cerere de a expedia pagina respectiva
- In final pagina veche este inlocuita cu pagina noua.
O legatura se poate face in mod analog si catre o pagina aflata in acelasi director.(<a
href=pagina2.html>zona activa</a>, sau catre o pagina de pe acelasi disc local (se specifica calea), etc. Si
o imagine se poate utiliza ca zona activa.
Cadre sau subferestre
Cadrele ne permit sa definim in fereastra browserului subferestre in care sa fie incarcate documente HTML
diferite.
Cadrele sunt definite intr-un fisier HTML special, in care blocul <body></body> este inlocuit cu blocul
<frameset></frameset>. In interiorul acestui bloc , fiecare cadru este introdus prin eticheta <frame>. Un
atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare adresa URL a documentului
HTML care va fi incarcat in acel frame.
Definirea cadrelor se face din aproape in aproape, prin impartirea ferestrelor (si a subferestrelor) in linii si
coloane:
Impartirea unei ferestre intr -un numar de subferestre de tip coloana se face cu ajutorul atributului cols
al etichetei <frameset> ce descrie acea fereastra;
Impartirea unei ferestre intr -un numar de subferestre de tip linie se face cu ajutorul atributului rows al
etichetei <frameset> ce descrie acea fereastra;
Valoarea atributelor cols si rows este o lista de elemente (pentru fiecare subfereastra cate un element)
separate prin virgula, care descriu modul in care se face impartirea.
Elementele listei pot fi:
a) un numar intreg de pixeli;
b) procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);
c) n*, care inseamna n parti din spatiul ramas.
Observatii:
Daca mai multe elemente din lista sunt configurate cu *, atunci spatiul disponibil ramas se va imparti in
mod egal.
O subfereastra poate fi un cadru (folosind <frame>) in care se va incarca un document HTML sau
poate fi impartita la randul ei in alte subferestre (folosind <frameset>).
Formulare si butoane:
O posibilitate de a realiza interactivitatea pentru o pagina Web este folosirea formularelor (forms). Un
formular este un ansamblu de zone active alcatuit din butoane de apasat, casete de selectie, campuri de
editare etc. Un formular este definit intr -un bloc delimitat de etichetele corespondente <form></form>.
Blocurile <form> nu pot fi imbricate si intr -o pagina Web pot fi create oricate formulare.
Atributele esentiale ale elementului <form> :
1. Atributul action: precizeaza ce se va intampla cu dat ele formularului o data ce acestea ajung la
destinatie. Valoarea atributului action poate fi de asemenea o adresa valida de e -mail.
2. Atributul method: precizeaza metoda utilizata de browser pentru expedierea formularului.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul
elementului se foloseste atributul type al etichetei <input>. Pentru un camp de editare, acest atribut
primeste valoarea text. Un buton de
expediere al unui formular se introduce cu ajutorul etichetei <input>, in care atributul type este configurat
la valoarea submit.
Butoanele radio permit alegerea, la un moment dat, a unei singure variante dintre mai multe posibile; se
introduc prin eticheta <input> cu atributul type avand valoarea radio.
Marcaj
HTML
Marcaj de
inchidere
Atribute Valori posibile Semnificatia
 Comentarii in codul sursa
<address
>
</address> Se foloseste pentru scrierea unei adrese, sau se pune in general la
sfarsitul programului HTML pentru a spune date despre autorul
paginii
Corpul paginii HTML
Bgcolor Nume de culoare
in engleza sau
cod hexazecimal
Da culoarea fundalului
Text Nume de culoare Da culoarea textului
Leftmargin Un numar
natural sau un
procent
Stabileste marginea din stanga a paginii
<body> </body>
Topmargin Un numar
natural sau un
procent
Stabileste marginea de sus a paginii
<br> Trecere la linie noua
<head> </head> Informatia de formatare HTML
<Hn> </Hn> 1..6 Nivelul de subtitlu al documentului
Traseaza o linie orizontala
Size Numar Inaltimea liniei
Width Numar sau
procent
Latimea liniei
Noshade Dezactiveaza umbra
<hr>
Align Left / center /
right
Aliniaza linia in pagina
Color Culoare Da culoarea liniei
<HTML
>
</HTML> Defineste un fisier de format Web
Face trecerea la un nou paragraf <p>
Align Center / left /
right
Aliniaza paragraful
<pre> </pre> Informatie preformatata: textul apare scris exact ca in
documentul sursa
<b> </b> Scriere bold-uita (ingrosata)
<i> /
<cite> /
<em> /
<q>
</i> /
</cite> /
</em> /
</q>
Scriere italica
<u> </u> Scriere subliniata
<strike> /
<s>
</strike> /
</s>
Scrirea sectionata
<sub> </sub> Scriere de indice
<sup> </sup> Scriere de exponent
<blink> </blink> Scriere clipitoare
<code> / </code> / Scriere asemanatoare masinii de scris
<big> </big> Scrierea textului cu o unitate mai mare
<small> </small> Scrierea textului cu o unitate mai mica
Stabilirea caracteristicilor fontului de baza
Style Arial, cursive,
etc
Da tipul / stilul fontului
Color Culoare Da culoarea fontului
<basefon
t>
Size 1..7 Da marimea fontului (implicit e 3)
Stabilirea caracteristicilor fontului
Color Culoare Da culoarea textului
Face Arial etc Da stilul fontului
Size 1..7 , +1/2, -1/2 Da marimea fontului
<font> </font>
Weight 100,200..900 Da grosimea fontului
<nobr> </nobr> Textul e afisat pe o linie
<center> </center> Centreaza toate blocurile
<blockquot
e>
</blockquot
e>
Identarea textului
Mod de a aranja blocurile
Align Center / left /
right
Aliniaza blocurile
<div> </div>
Nowrap Interzice intreruperea randurilor de catre browser
<xmp> </xmp> Scrie 80 de caractere pe rand
<listing> </listing> Scrie 120 de caractere pe rand
Blocuri de titluri. 6=caractere minime, 1=caractere maxime.
Inainte de un titlu browserul introduce un rand.
<h1>..<h6> </h1>..</h6
>
Align Center etc Aliniaza titlurile
<ul> </ul> Lista neordonata
Type Circle / disc /
square
Da tipul bullet-ului de la inceputul fiecarui element al listei
<ol> </ol> Lista ordonata
Type A / I / 1 /a / i Da tipul de ordonare
Start Numar Da numarul de la care incepe
<li> Se foloseste inaintea fiecarui element al listei ordonate si
neordonate
<dl> </dl> Lista de definitii
<dt> Se foloseste in fata fiecarui termen de definit al listei de definitii
<dd> Se foloseste in fata fiecarei definitii al listei de definitii
Pentru inserarea unui tabel
Border Numar natural Latimea liniilor tabelului
Cellspacing Numar natural Spatierea dintre celule (pixeli)
Cellpadding Numar natural Spatierea dintre chenar si continurul celulei (pixeli)
Width Numar natural,
procente
Latimea dorita, prioritara fata de latimea calculata
Frame Void / above /
bellow / hsides /
lhs / rhs / vsides /
box / border
Control detaliat al celulelor (elimina muchiile, afiseaza muchie
superioara, afiseaza muchie inferioara, afiseaza muchia
inferioara si pe cea superioara, afiseaza muchia stanga, afiseaza
muchia dreapta, etc
Rules None / groups /
rows / cols / all
Control detaliat al chenarelor (elimina muchiile interioare,
afiseaza muchiile orizontale intre toate grupurile Thead,
Tbody, Tfoot, Colgroup - etc)
Height Numar sau
procent
Inaltimea dorita
Align Left, etc Alinierea tabelului
<table> </table>
Bordercolor Culoare Culoarea chenarului tabelului pt. Internet Explorer
Pentru inserarea unui rand de tabel se foloseste optional
Bgcolor Culoare Culoarea de fond al randului
<tr> </tr>
Align Left / center /
right
Alinierea celulelor
Pentru inserarea datei / celulei in randul din tabel <td> </td>
Bgcolor Culoare Culoarea de fond a celulei
Colspan Numar Numar de coloane
Rowspan Numar Numar de linii pe care se va intinde aceasta celula de date
Align Left, etc Aliniere orizontala
Valign Top, middle,
bottom
Aliniere verticala
Height Numar, procente Inaltimea celulei
Width Numar, procente Latimea celulei
Background URL Specifica imaginea de fond a celulei Internet Explorer
Da titlul tabelului <caption
> Align Top, bottom Alinierea titlului
<th> </th> Da capul de tabel
Marcaj de includerea imaginilor
Src Url Sursa fisier grafic
Alt Text Alternativa text pentru afisare, daca e cazul
Align Top, middle, left
etc
Alinierea imaginii in pagina
Height Numar Inaltime imagine (pixeli)
Width Numar Latime imagine (pixeli)
Border Numar Chenarul din jurul imaginii atunci cand este folosita ca
hiperlegatura
Hspace Numar Spatiu suplimentar orizontal
Vspace Numar Spatiu suplimentar vertical
Suppress True / false Permite sau nu activarea incarcarii imaginii in pagina
<img>
Longdesc URL Pagina we ce ofera detalii despre imagine
Marcaj de tip ancora <a> </a>
Href URL Referinta hipertext
Href #nume Referinta catre o ancora interna
Name Nume Definitia unei ancore interne
Title Nume Da titlul
Target _blank, _parent,
_self, _top
Da tinta legaturii
Deffineste un text care este afisat intr-o regiune animata a paginii
Web (numai in IE)
Behavior Slide, alternate
etc
Comportarea controlului marquee
Direction Left, right etc Directia de derulare a controlului marquee (left, right)
Height Numar sau % Inaltimea controlului marquee
Width Numar sau % Latimea controlului marquee
Hspace Numar Spatiu suplimentar orizontal in jurul controlului marquee
Vspace Numar Spatiu suplimentar vertical in jurul controlului marquee
Bgcolor Culoare Culoare de fond a controlului marquee (nume de culoare)
Scrollamo
unt
Numar Cantitatea de material adaugata in unitatea de timp (in pixeli)
<marquee> </marquee>
Scrolldelay Numar Intarzierea dintre afisarile controlului marquee

Codul HTM

Î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

Codul HTM

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea unui SITE

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