Crearea paginilor Web

Noţiuni introductive
Pagina Web

Cod sursă

Limbajul
H.T.M.L.

Grup Şcolar de Arte şi Meserii “Ion Mincu”
Prof. Berceanu Camelia

Cuprins
Limbajul H.T.M.L.
Editarea unui document H.T.M.L.
Operaţii de bază
Structura unui document H.T.M.L.
Parametrii marcajului <BODY>…</BODY>
Formatarea textului într-o pagină Web
Formatarea paragrafelor
Test de evaluare
Bibliografie

Limbajul
H.T.M.L.

HYPER TEXT MARKUP LANGUAGE (limbaj de marcare a
hipertextului) - este un limbaj pentru descrierea unui document
Web, în care fiecare element este marcat prin semne speciale ale
limbajului numite Taguri.
H.T.M.L. a fost conceput în anul1989 de Tim Berners-Lee,
licenţiat la Oxford, pe atunci fizician. Fiind şi expert în software,
Berners-Lee e acum director al World Wide Web Consortium
( pe scurt, W3C ), adică al organizaţiei care coordonează
dezvoltarea web-ului.
Sintaxa oricarui tag este:
<TAG atribut1="val" atribut2="val">Text</TAG>
Hipertext este un text îmbogăţit. El conţine:
- text obişnuit;
- etichete pentru formatarea textului şi încapsularea altor tipuri de
informaţii (salturi rapide către alte resurse de informaţii, sunete,
imagini, filme, etc).
Hipertextul este stocat în fişiere având o extensie specială: .htm
sau html.

Noţiunea de Hipertext
Hipertextul nu face decât să creeze legături între mai multe pagini Web pe o
porţiune de tip text. Hipermedia este un termen ce a apărut ca urmare a dezvoltării
noilor tehnologii şi a posibilităţii de a crea legături prin fişiere ce conţin: animaţie, sunet,
film, imagine.
Hipertextul şi hipermedia permite stocarea unei cantităţi mari de
informaţie, iar utilizatorului îi oferă posibilitatea parcurgerii documentului
respectiv în ce ordine doreşte, dându-i senzaţia de navigare într-un spaţiu
virtual. De aici vine şi sintagma: “a naviga pe Internet”.
Paginile Web au fost construite iniţial cu ajutorul unui limbaj de
marcare a hipertextelor, numit HTML (HyperText Markup Language).
Acesta conţine comenzi care-i transmit browser-ului să afişeze text,
imagini, fişiere multimedia şi legături cu alte pagini Web.
Mai multe pagini Web conectate între ele prin hiper-legături ce au un subiect
comun, formează un site Web.

Editarea unui document
HTML
Pentru editarea unui
document
Html
putem folosi editorul
de text Notepad sau
un editor specializat
în crearea paginilor
Web.
Se lansează în execuţie
editorul Notepad, se
scrie codul sursă şi se
salvează cu extensia
.html

Operaţii de
bază
Deschiderea unui document Html se
poate face astfel:
Se deschide editorul de texte
Notepad şi se alege din meniul File
(Fişier) opţiunea Open (Deschide);
va apărea o casetă de dialog cu
ajutorul căruia utilizatorul caută
documentul ce urmează a fi deschis;
Se execută clic dreapta pe iconiţa
fişierului şi se alege opţiunea Open
With…(Deschide cu…) Notepad;
Se deschide pagina html si se alege
opţiunea Source (Sursă) din meniul
View (Vizualizare);

Structura unui
document H.T.M.L.
Un document H.T.M.L. conţine
marcajele <Html>…</Html>,
marcaj ce defineşte documentul ca
fiind de tip Html şi cuprinde două
părţi:
Antetul paginii – Secţiunea Head
(cuprinsă între <Head> şi
</Head>) conţine antetul paginii.
Ea furnizează titlul paginii, cuprins
între marcajele <Title> şi
</Title>.
Corpul paginii – Secţiunea Body
(cuprinsă între <Body> şi
</Body>). În această secţiune se
defineşte practic pagina Web.

Parametrii marcajului
<BODY>…</BODY>
CULOARE

Marcajul <BODY> … </BODY>
încadrează conţinutul propriuzis al paginii, având
următoarele atribute: bgcolor,
background, text, link, vlink,
alink;
Atributele bgcolor / background
încadrează o culoare de fond
sau o imagine ca fundal pentru
pagina Web.
Sintaxa este: <body
bgcolor=”pink”> sau <body
background=”didactic.jpg”>

DENUMIRE VALOARE
#rrggbb

NEGRU

BLACK

#000000

ALB

WHITE

#FFFFFF

ROŞU

RED

#FF0000

ARGINTIU

SILVER

#C0C0C0

GRI

GRAY

#808080

CASTANIU

MAROON

#800000

VERDE

GREEN

#008000

GALBEN

YELLOW

#FFFF00

ALBASTRU

BLUE

#0000FF

VERNIL

LIME

#00FF00

MĂSLINIU

OLIVE

#808000

ALBASTRU MARIN

NAVY

#000080

Exemplu

Formatarea textului într-o
pagină Web
Stabilirea stilului fonturilor se face cu ajutorul tag-ului
<Font>…</Font> cu atributele:
- Face – pentru stabilirea fonturilor, având sintaxa <font
face=”Tahoma” Utilizăm fontul Tahoma></font>;
- Size – pentru stabilirea dimensiunii fonturilor, având
sintaxa<font size=”2” Acest text are mărimea1></font>;
- Color – pentru stabilirea culorii fonturilor, având sintaxa
<font color=”red” Acest text este roşu> </font>;
Stabilirea elementelor de stil se face cu ajutorul tag-urilor
<I>…</I>, <B>…</B>, <U>…</U>, <S>…</S>, având ca
efect înclinarea, îngroşarea, sublinierea şi tăierea textului cu o
linie.

Alte elemente de stil
Tag-ul em(emphasized)

<p><em> Acest text este evidenţiat italic></em></p>
Tag-ul strong

<p><strong> Acest text este evidenţiat
îngroşat></strong></p>
Tag-urile small,big

<p> Ultimul cuvânt este mai<small> mic</small>></p>
<p> Ultimul cuvânt este mai<big> mare</big>></p>
Tag-urile sub, sup

<p> Ultimul cuvânt este un<sub> indice</sub>></p>
<p> Ultimul cuvânt este o<sup>putere</sup>></p>

Exemplu

Formatarea
paragrafelor
În Notepad, wordPad, Microsoft Word paragrafele se separă prin
tastarea unui Enter, în schimb, în HTML, Enter-ul nu are nici un
efect.
Fără o altă comandă, un rând al unui paragraf are lăţimea
ferestrei afişată de browser. De exemplu, dacă micşorăm fereastra
browser-ului acelaşi paragraf va ocupa mai multe rânduri.
Dacă două cuvinte ale unui paragraf sunt separate prin mai
multe spaţii, browser-ul afişează doar un singur spaţiu.
În HTML delimitarea paragrafelor se realizează utilizând tag-ul
<p> conţinut paragraf </p> având următoarele atribute:
Align - controlează alinierea paragrafului. Poate lua una din
valorile:
Center - paragraful este aliniat în centru.
Left - paragraful este aliniat la stânga.
Right - paragraful este aliniat la dreapta.
Justify - paragraful este aliniat la ambele margini.

Test de evaluare
1. Care este marcajul care defineşte corpul documentului de tip HTML?
<BODY> </BODY>

<HTML> </HTML>

<HEAD> </HEAD>

2. Care este extensia unui document HTML?

3. Care sunt marcajele obligatorii într-un document HTML? .exe

.xlp

.html

4. Care este marcajul folosit pentru trecerea la o linie nouă?
HTML, HEAD, BODY

<B>

HTML, TITLE, TABLE

<S>

HEAD, TITLE, BODY

<P>

5. Care este marcajul care trebuie folosit pentru a sublinia un
text?
<B>
<I>
<U>
7. Atributul ALIGN se poate utiliza în marcajele:
<BODY>
<P>
<S>
8. Atributele controlului "Font" sunt:
Face, color, width
Face, BG
Face, size, color
9. Elementul BODY admite următoarele atribute:
TITLE
BGCOLOR
BIG

În loc de concluzii:
Paginile Web au următoarele caracteristici:
sunt multimedia, adică ele conţin informaţii
sub formă de text, imagini, sunete, filme etc;
sunt interactive, adică răspund la cererile
utilizatorului;
sunt independente de platforma hardware şi
software, adică se văd la fel pe orice calculator,
având instalat orice sistem de operare şi
utilizând orice browser.

Bibliografie
http://www.didactic.ro/files/12/notiunidelimbajhtml1.doc
http://www.didactic.ro/lectii-informatica-12-elementele-unei-pagini-web-editarea-html-p37063-t0
http://www.didactic.ro/lectii-informatica-12-formatarea-documentelor-html-p37060-t0
http://www.didactic.ro/files/12/html_structura_unei_pagini.doc
http://www.didactic.ro/files/12/0formatarea_textului_dintr_o_pagina_web.pps#2
http://www.didactic.ro/files/12/0html_introducere.pps#4
http://www.didactic.ro/files/12/cum_functioneaza_paginile_web.pdf
http://www.didactic.ro/lectii-informatica-12-notiuni-de-html-p2690-t0
http://www.ecursuri.ro/cursuri/html-introducere.php
http://www.htmlcodetutorial.com
http://grafica.lufo.ro/
http://www.etutoriale.ro/articles/112/1/Tutorial-complet-HTML/

Sign up to vote on this title
UsefulNot useful