curs_initiere html.pdf

1

HTML DE BAZĂ

------------------------------------------------------------------

STRUCTURA UNUI DOCUMENT HTML

------------------------------------------------------------------

<HTML>

<HEAD>

<TITLE> Formatare paragraf intr-un document HTML

</TITLE>

</HEAD>

<BODY>

Salut!

Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum

este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui

pe internet. Saptamana viitoare trebuie sa prezint la ora de

engleza un referat cu tema "Internet viitorul omenirii?" in care

voi vorbi despre implicatiile pe care le are informatica si, in

special, internetul in viata omului viitorului. Sigur ca trebuie

sa fie o viziune a mea asupra viitorului si nu o profetie. Daca

tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva

sugestii in realizarea acestui referat ti-as ramane indatorata.

</BODY>

</HTML>

------------------------------------------------------------------

FORMATAREA PARAGRAFELOR

Trecerea la linie noua

Marcajul <BR>. El se poate folosi si in combinatie cu

parametrul CLEAR=optiune, optiune ce forteaza trecerea la linie

noua fata de marginea specificata.

Valorile posibile pentru optiune sunt left, right, all.

------------------------------------------------------------------

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

Salut! <BR CLEAR=all>

Ma numesc Alina si sunt eleva la un liceu din Craiova.

Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma

hai-hui pe internet. <BR> Saptamana viitoare trebuie sa prezint la

ora de engleza un referat cu tema "Internet viitorul omenirii?" in

care voi vorbi despre implicatiile pe care le are informatica si,

in special, internetul in viata omului viitorului. Sigur ca

trebuie sa fie o viziune a mea asupra viitorului si nu o profetie.

</BR>

Daca tu, draga mea prietene de pe internet, m-ai putea

ajuta cu cateva sugestii in realizarea acestui referat ti-as

ramane indatorata.

</BODY>

</HTML>

------------------------------------------------------------------

2

------------------------------------------------------------------

Specificarea unui paragraf

Marcajul <P>...<P/P>

------------------------------------------------------------------

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

Salut!

<P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum

este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui

pe internet. </P>

<P>Saptamana viitoare trebuie sa prezint la ora de engleza un

referat cu tema "Internet viitorul omenirii?" in care voi vorbi

despre implicatiile pe care le are informatica si, in special,

internetul in viata omului viitorului. Sigur ca trebuie sa fie o

viziune a mea asupra viitorului si nu o profetie. </P>

<P>Daca tu, draga mea prietene de pe internet, m-ai putea


ramane indatorata.</P>

</BODY>

</HTML>

------------------------------------------------------------------

Alinierea unui paragraf

Marcajul <P>...<P/P> se imbogateste cu optiunea align.

Optiunea align poate primi ca valoare unul din cuvintele:

left, right, center.

------------------------------------------------------------------

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

<P align="center">Salut!</P>

<P>Ma numesc Alina si sunt eleva la un liceu din Craiova.


hai-hui pe internet. </P>

<P>Saptamana viitoare trebuie sa prezint la ora de




sa fie o viziune a mea asupra viitorului si nu o profetie. </P>




</BODY>

</HTML>

------------------------------------------------------------------

3

------------------------------------------------------------------

Centrarea textului

Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a

textului.

{Are acelasi efect ca marcajul <P align="center">...</P>}

------------------------------------------------------------------

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

<CENTER> Salut! </CENTER>

<P>Ma numesc Alina si sunt eleva la un liceu din Craiova.


hai-hui pe internet. </P>

<P>Saptamana viitoare trebuie sa prezint la ora de




sa fie o viziune a mea asupra viitorului si nu o profetie. </P>




</BODY>

</HTML>

------------------------------------------------------------------

FORMATAREA FONT-URILOR

------------------------------------------------------------------

Un font reprezinta un set de caractere (256) cu un aspect

grafic unitar.

Stiluri de afisare: ingrosat, inclinat, subliniat.

Marcajul <B>...</B> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara ingrosat.

Marcajul <I>...</I> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara ingrosat.

Marcajul <U>...</U> este folosit daca vrem ca un cuvant

sau o portiune din text sa ne apara subliniat.

Nivele de titlu

Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al

unui document; n poate lua valori de la 1 la 6. Cel mai inalt

nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6

fiind cel mai mic nivel.

Alegerea tipului de font

Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va

primi ca valoare numele fontului ce intentionam sa-l folosim

incadrat de ghilimele) -> permite alegerea tipului de font cu care

dorim sa fie afisat textul.

4

<FONT face="Courier, Arial">...</FONT>

Alegerea dimensiunii caracterelor

Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va

primi ca valoare un numar incadrat intre ghilimele).

<FONT face="Courier,Arial" size="4">...</FONT>

Alegerea culorii font-ului

Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea

acestei optiuni va fi numele in limba engleza incadrat de

ghilimele sau codul culorii precedat de semnul # si incadrat, de

asemenea, de ghilimele.

<FONT face="Courier,Arial" size="4" color="red">...</FONT>

<FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT>

------------------------------------------------------------------

LINII DE DELIMITARE SI COMENTARII

------------------------------------------------------------------

Marcajul <HR>, plasat oriunde in document, are ca efect trasarea

unei linii orizontale.

Se poate folosi in combinatie cu parametrii: SIZE=optiune,

WIDTH=optiune, ALIGH=optiune si NOSHADE.

- optiunea parametrului SIZE este un numar ce stabileste

grosimea liniei;

- optiunea parametrului WIDTH poate stabili cat la % din

latimea paginii va ocupa rigla respectiva;

- parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH

si optiunea lui are drept efect fortarea liniei fata de marginea

specificata. Valorile posibile pentru optiune sunt left, right.

- optiunea COLOR stabileste culoarea riglei;

- prin prezenta parametrului NOSHADE, fara nici o optiune, se

dezactiveaza afisarea umbrei pentru rigla orizontala.

Comentarii

Comentariile sunt texte incadrate intre .

Rolul comentariilor este de a face un document HTML mai usor

de inteles prin plasarea unor expicatii din loc in loc. Ele nu vor

fi afisate in cuprinsul paginii Web creata prin documentul

respectiv.

------------------------------------------------------------------

5

ÎMBUNĂTĂŢIREA PAGINII WEB CU IMAGINI, LISTE ŞI TABELE

Imagini GIF si JPG

Formele grafice permise de HTML sunt: GIF(imagini;256 culori)

şi JPG (imagini; milioane de culori).

Inserarea imaginilor

Marcajul <IMG SRC=nume_imagine>

Exemplu (PISICA.html)

<HTML>

<HEAD>

<TITLE> Includerea unei imagini </TITLE>

</HEAD>

<BODY>

<HR SIZE=30 color=RED>

<IMG SRC=C:\catel.jpg>

<H1><CENTER> Salut!</CENTER></H1>

<CENTER><FONT face="Courier, Arial" color="RED"

size="6"><P> Ma numesc Motanel!</P></FONT></CENTER>

<CENTER><IMG SRC=C:\pisica.jpg></CENTER>

<HR SIZE=30 color=RED>

<I>[email protected]</I><HR COLOR=red>

</BODY>

</HTML>

Efect

Salut!

Ma numesc Motanel!

[email protected]

6

Liste in pagini Web

Liste Ordonate (elementele sunt automat numerotate).

Declararea unei liste ordonate se face cu ajutorul marcajului:

<OL>..</OL>

Ex. Nr.1 (LO1.html) Efect

<OL>

<LI>element 1

<LI>element 2

<LI>element 3

</OL>

1. element 1

2. element 2

3. element 3

Ex. Nr.2 (LO2.html) Efect <OL TYPE=A>

<LI>element 1

<LI>element 2

<LI>element 3

</OL>

A. element 1

B. element 2

C. element 3

Ex. Nr.3 (LO3.html) Efect <OL TYPE=I START=3>

<LI>element 1

<LI>element 2

<LI>element 3

</OL>

III. element 1

IV. element 2

V. element 3

Ex. Nr.4 (LO4.html) Efect

<OL TYPE=I START=3>

<LI>element 1

<LI VALUE=10>element 2

<LI VALUE=20>element 3

<LI>element 4

</OL>

III. element 1

X. element 2

XX. element 3

XXI. element 4

Liste Neordonate – sau liste marcate (elementele sunt marcate

printr-un semn special).

Declararea unei liste neordonate se face cu ajutorul marcajului:

<UL>..</UL>.

Ex. Nr.1 (UL1.html) Efect

<UL>

<LI> element 1

<LI> element 2

<LI> element 3

</UL>

element 1

element 2

element 3

Ex. Nr.2 (UL2.html) Efect <UL TYPE=circle>

<LI> element 1

<LI> element 2

<LI> element 3

</UL>

o element 1

o element 2

o element 3

7

{Schimbarea simbulului care preced elementele din lista se poate

face utilizand parametrul TYPE al marcajului <UL>..</UL>, caruia i

se pot asocia una dintre urmatoarele valori> disc, circle şi

square.}

Liste de Definitii de termeni si definitiile lor asociate.

Declararea unei liste ordonate se face cu ajutorul marcajului

<DL>..</DL> utilizat impreuna cu marcajul <DT> pentru termenul

definit si marcajul <DD> pentru definitia propriu zisa.

Exemplu (DL.html)

<DL>

<DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate

prin caractere mai ingrosate.

<DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet.

<DT>Font<DD>Utilizarea particulara a unui anumit stil de

caractere.

</DL>

Efect

Aldine

Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.

Date

Flux nesfarsit de materiale care apar pe Internet.

Font

Utilizarea particulara a unui anumit stil de caractere.

Liste in liste – liste imbricate

Listele pot fi conţinute una într-alta. În proiectarea unei pagini Web trebuie avut în vedere

următorul lucru foarte important: informaţia conţinută în pagină să fie structurată astfel încât să

poată fi uşor de urmărit şi de găsit. În acest sens combinarea celor trei tipuri de liste este foarte utilă.

Exerciţiu:

Construiţi o pagină Web în care să redactaţi propria agendă telefonică utilizând listele de

definiţii. Documentul va fi salvat sub numele Agenda.html în directorul Elev al directorului

rădăcină.

Exemplu (Liste_imbricate.html)

<HTML>

<HEAD>

<TITLE>Liste in pagini Web</TITLE>

</HEAD>

<BODY>

<HR SIZE=30 COLOR=RED>

<IMG SRC=c:\Alina.jpg allign=right>

<H1><CENTER>Salut!</CENTER></H1>

<HR WIDTH=50%>

<UL>

<LI><H3>Date personale</H3>

<DL>

8

<DT>Nume:<DD>Mateescu.

<DT>Prenume:<DD>Alina

<DT>Data nasterii:<DD>12_04_1985

<DT>Profesia:<DD>Eleva anul II la Colegiu

</DL>

<LI><H3>Stare emotionala</H3>

Acum este tarziu, dar cum somnul intarzie sa apara iata-ma

hai-hiu pe internet.

<P><LI><H3>Preocupari actuale</H3>

Saptamana viitoare trebuie s prezint la ora de engleza un

referat cu urmatoarele caracteristici>

<UL>

<LI>Tema- "Internet viitorul omenirii?"

<LI>Continutul:-implicatiile pe care le are informatica si, in

special, internetul in viata omului viitorului

<LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra

viitorului si nu o profetie

</UL>

<LI><H3>Sugestii</H3>

Daca tu, draga prietene de pe internet, m-ai putea ajuta cu

cateva sugeestii in realizarea acestui referat ti-as ramane

indatorata. <P>

</UL>

<HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P>

<I>[email protected]</I><HR COLOR=RED>

</BODY>

</HTML>

Efect

Salut!

Date personale

Nume:

Mateescu.

Prenume:

Alina

Data nasterii:

12_04_1985

Profesia:

Eleva anul II la Colegiu

9

Stare emotionala

Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet.

Preocupari actuale

Saptamana viitoare trebuie s prezint la ora de engleza un referac cu urmatoarele

caracteristici>

o Tema- "Internet viitorul omenirii?"

o Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata

omului viitorului

o Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie

Sugestii

Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea

acestui referat ti-as ramane indatorata.

Alina

[email protected]

Inserarea tabelelor

Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar în interiorul acestui marcaj se

utilizează marcajele:

<TR>..</TR> pentru definirea unei linii a tabelului;

<TH>..</TH> pentru definirea antetului tabelului;

<TD>..</TD> pentru definirea datei unei cellule a tabelului.

Parametrii marcajului <TABLE> Parametrii marcajului <TD>

BORDER=n – permite definirea

zonei umbrite din jurul tabelului

(n, nr. întreg).

BORDER COLOR=cod_culoare

– permite definirea culori zonei

umbrite.

CELLSPACING=n – defineşte

spaţiul lăsat între celule (n, nr.

întreg - pixeli).

CELLPADDING=n - defineşte

spaţiul lăsat dintre data din celulă

şi chenarul celulei (n, nr. întreg -

pixeli).

COLSPAN=n – permite unei celule să se

extindă pe mai multe coloane.

ROWSPAN=n – permite unei celule să se

extindă pe mai multe rînduri.

GBCOLOR=culoare –permite definirea

culorii de fond a unei celule.

ALIGN=pozitie – specifică alinierea

orizontală a datei din celulă. Opţiunile posibile

sunt: Left, Right, Center.

BACKGROUND=fisier_imagine permite

specificarea unei imagini grafice de fond în

interiorul unei cellule.

10

WIDTH=n – permite definirea

lăţimii dorite a tabelului (n, în

pixeli sau în procente).

HEIGHT=n permite definirea

înălţimii dorite a tabelului (n, în

pixeli sau în procente).

Ex. Nr. 1 (Tabel1.html) Efect

<HTML>

<HEAD>

<TITLE>Tabele</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR><TH>Nume</TH>

<TH>Prenume</TH>

<TH>Media</TH>

<TR><TD>Petcu</TD>

<TD>Ionut</TD>

<TD>8.20</TD>

</TABLE>

</BODY>

</HTML>

Nume Prenume Media

Petcu Ionut 8.20

Ex. Nr. 2 (Tabel2.html) Efect

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE BORDER COLOR=RED>

<TR><TH>Nume</TH>

<TH>Prenume</TH>

<TH>Media</TH>

<TR><TD>Petcu</TD>

<TD>Ionut</TD>

<TD>8.20</TD>

</TABLE>

</BODY>

</HTML>

Nume Prenume Media

Petcu Ionut 8.20

Ex. Nr. 3 (Tabel3.html)

<HTML>

<HEAD>


</HEAD>

11

<BODY>

<TABLE BORDER HEIGHT=100 WIDTH=100>

<TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH>

<TH>Nume</TH>

<TH>Prenume</TH>

<TH>Media</TH>

<TR><TD>Petcu</TD>

<TD>Ionut</TD>

<TD>8.20</TD>

</TABLE>

</BODY>

</HTML>

Efect

Candidat Nume Prenume Media

Petcu Ionut 8.20

Exerciţiu:

Construiţi o pagină Web de prezentare a oraşului în care locuiţi. Înseraţi imagini cu

monumente semnificative ale oraşului. Structuraţi pagina utilizând un tabel fără chenar. Folosiţi

pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html

în directorul Elev al directorului rădăcină.

12

REFERINŢE ÎN PAGINI WEB

Referinţe interne

Referinţe externe

Link-uri şi imagini

Principala caracteristică a hipertextelor o constituie legăturile (links).

Un links este o conexiune către altă resursă Web, resursă care poate fi accesată din fereastra

browser – ului printr-un singur clic.

Link-urile pot fi de două tipuri: interne şi externe.

Marcajul principal atât pentru referinţele interne cât şi pentru cele externe este: <A>…</A>

(anchor- ancoră), acesta trebuie să conţină parametrul HREF=valoare, fără de care nu are nici un

sens.

Referinţe interne

Să presupunem că dorim să adăugăm un cuprins unei pagini Web de dimensiune mare

pentru a permite utilizatorului să se deplaseze într-un anumit loc din aceeaşi pagină. Locurile în care

dorim să se facă deplasarea se numesc ţintele salturilor interne din paginile Web sau ancore cu

nume şi sunt specificate, în cadrul documentului HTML, prin utilizarea parametrului name al

marcajului <A>…</A>:

<A name=valoare>Mesaj</A>

Ex.: <A nume="baza">Baza materială</A>

Unde valoarea parametrului name poate fi orice secvenţă de caractere, numere sau semen de

punctuaţie.

Adăugarea legăturilor către ţinte din cadrul paginii Web

Corespondentul unei ancore cu nume care defineşte saltul către această ţintă este:

<A HREF=#NumeAncorăCuNume>Mesaj</A>

<A HREF="#baza">Baza materiala</A>

Exemplu care ilustrează cum ar arăta un set de ancore cu nume într-un document HTML

destinat să afişeze o pagină Web a unei şcoli.

<html>

<body background="C:\Documents and Settings\andye\My Documents\My Pictures\404.gif"

text="steelblue">

<h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1>

<h2><I>Prof. ing. Bostan Mihaela</I></h2>

<Font color="green" size="5">

<P><a href=#jos name=sus>Du-te jos</a>

<P><A HREF="#baza">Baza materiala</A>

<P><A HREF="#profile"> Profile</A>

<P><A HREF="#profesori"> Profesori</A>

<P><A HREF="#elevi"> Elevi</A>

<A NUME="baza"><h2>BAZA MATERIALA</h2></A>

<br>27 sali de clasa

<br>14 laboratoare si sali specializate

13

<br>un atelier scoala

<br>o biblioteca

<br>laboratoare de informatica cu retea de calculatoare si acces la Internet

<br>cabinet metodic de perfectionare

<br>dispensar medical scolar

<br>cabinet stomatologic scolar

<br>un bazin de inot in constructie

<br>baza sportiva proprie

<br>o cantina

<br>un camin

<br><a name=jos href=#sus>Du-te sus</a>

<A NAME="profile"><h2>PROFILE</h2>

<br>Profil Pedagogic

<br>Invatatori-Educatoare

<br>Profil Bibliotecar si Pedagog scolar

<br>Bibliotecar documentarist

<br>Instructor animator

<br>Pedagog scolar

<br>Profil Matematica-Informatica

<br>Profil Stiinte ale naturii

<br>Profil Filologie


<A NAME="profesori"><h2>PROFESORI</h2>

<br>Gorbanescu

<br>Stoica

<br>Negrea

<br>

...

<br>


<A NAME="elevi"><h2>ELEVI</h2>

<br>5A-Dir.: Prof. Negrea

<br>5B-Dir.: Prof. Mocanu

<br>5C-Dir.: Prof. Vintila

<br>6A-Dir.: Prof. Cuciureanu

<br>6B-Dir.: Prof. Arsinte

<br>6C-Dir.: Prof. Bibire

<br>7A-Dir.: Prof. Escu

<br>7B-Dir.: Prof. Costea

<br>7C-Dir.: Prof. Mirzac

<br>

…


</body>

</html>