Creareapaginilorweb

Crearea paginilor Web
Noţiuni introductive
Pagina Web
Cod sursă
Limbajul
H.T.M.L.
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>
VALOARE
CULOARE DENUMIRE
Marcajul <BODY> …
#rrggbb
</BODY> încadrează conţinutul NEGRU BLACK #000000
propriu-zis al paginii, având ALB WHITE #FFFFFF
următoarele atribute: bgcolor, ROŞU RED #FF0000
background, text, link, vlink, ARGINTIU SILVER #C0C0C0
alink; GRI GRAY #808080
Atributele bgcolor / CASTANIU MAROON #800000
background încadrează o VERDE GREEN #008000
culoare de fond sau o imagine GALBEN YELLOW #FFFF00
ca fundal pentru pagina Web. ALBASTRU BLUE #0000FF
Sintaxa este: <body VERNIL LIME #00FF00
bgcolor=”pink”> sau <body MĂSLINIU OLIVE #808000
background=”didactic.jpg”> ALBASTRU MARIN NAVY #000080

Exemplu
Formatarea textului într-o pagină
Web
Stabilirea stilului fonturilor se face cu ajutorul tag-ului

… cu atributele:
- Face – pentru stabilirea fonturilor, având sintaxa
 ;
- Size – pentru stabilirea dimensiunii fonturilor, având
sintaxa;
- Color – pentru stabilirea culorii fonturilor, având
sintaxa ;
Stabilirea elementelor de stil se face cu ajutorul tag-
urilor …, …, …, <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)
 Acest text este evidenţiat italic>
Tag-ul strong
 Acest text este evidenţiat
îngroşat>
Tag-urile small,big
 Ultimul cuvânt este mai mic>
 Ultimul cuvânt este mai<big> mare</big>>
Tag-urile sub, sup
 Ultimul cuvânt este un indice>
 Ultimul cuvânt este oputere>
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 
conţinut paragraf 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?
.xlp .html .exe

3. Care sunt marcajele obligatorii într-un document HTML?
HTML, HEAD, BODY HTML, TITLE, TABLE HEAD, TITLE, BODY

4. Care este marcajul folosit pentru trecerea la o linie nouă?
 <S> 

5. Care este marcajul care trebuie folosit pentru a sublinia un text?
 
7. Atributul ALIGN se poate utiliza în marcajele:
<BODY> <S>

8. Atributele controlului "Font" sunt:
Face, color,
9. Elementul BODY width
admite Face, BG
următoarele Face, size, color
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/

Creareapaginilorweb

Î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

Creareapaginilorweb

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea paginilor Web

Editarea unui document H.T.M.L.

Structura unui document H.T.M.L.

Parametrii marcajului <BODY>…</BODY>

Formatarea textului într-o pagină Web

</BODY> încadrează conţinutul NEGRU BLACK #000000

propriu-zis al paginii, având ALB WHITE #FFFFFF

următoarele atribute: bgcolor, ROŞU RED #FF0000

background, text, link, vlink, ARGINTIU SILVER #C0C0C0

alink; GRI GRAY #808080

Atributele bgcolor / CASTANIU MAROON #800000

background încadrează o VERDE GREEN #008000

culoare de fond sau o imagine GALBEN YELLOW #FFFF00

ca fundal pentru pagina Web. ALBASTRU BLUE #0000FF

Sintaxa este: <body VERNIL LIME #00FF00

bgcolor=”pink”> sau <body MĂSLINIU OLIVE #808000

background=”didactic.jpg”> ALBASTRU MARIN NAVY #000080

Stabilirea stilului fonturilor se face cu ajutorul tag-ului

2. Care este extensia unui document HTML?

.xlp .html .exe

HTML, HEAD, BODY HTML, TITLE, TABLE HEAD, TITLE, BODY

<B> <S> <P>

<BODY> <P> <S>

TITLE BGCOLOR BIG

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