Documente online.
Zona de administrare documente. Fisierele tale
Am uitat parola x Creaza cont nou
 HomeExploreaza
upload
Upload




IMBUNATATIREA PAGINII WEB CU IMAGINI, LISTE SI TABELE

html


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

4.1. Imagini GIF si JPG

Formele grafice permise de HTML sunt: GIF(imagini;256 culori) si JPG (imagini; milioane de culori).



4.2. Inserarea imaginilor

Marcajul <IMG SRC=nume_imagine>

Exemplu (PISICA.html)

<HTML>

<HEAD>

<TITLE> Includerea unei imagini </TITLE>

</HEAD>

<BODY>

<HR SIZE=30 color=RED> 919i84j

<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> 919i84j

<I>pisica@k.ro</I><HR COLOR=red>

</BODY>

</HTML>

Efect

Salut!

Ma numesc Motanel!

pisica@k.ro

4.3. 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>
  1. element 1
  2. element 2
  3. element 3

Ex. Nr.3 (LO3.html)

Efect

<OL TYPE=I START=3>

<LI>element 1

<LI>element 2

<LI>element 3

</OL>
  1. element 1
  2. element 2
  3. 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>
  1. element 1
  1. element 2
  1. element 3
  2. 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>
  • element 1
  • element 2
  • element 3

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 continute una într-alta. În proiectarea unei pagini Web trebuie avut în vedere urmatorul lucru foarte important: informatia continuta în pagina sa fie structurata astfel încât sa poata fi usor de urmarit si de gasit. În acest sens combinarea celor trei tipuri de liste este foarte utila.

Exercitiu:

Construiti o pagina Web în care sa redactati propria agenda telefonica utilizând listele de definitii. Documentul va fi salvat sub numele Agenda.html în directorul Elev al directorului radacina.

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>

<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>alina@k.ro</I><HR COLOR=RED>

</BODY>

</HTML>

Efect

Salut!

Date personale

Nume:

Mateescu.

Prenume:

Alina

Data nasterii:

Profesia:

Eleva anul II la Colegiu

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>

    • Tema- "Internet viitorul omenirii?"
    • Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului
    • 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

alina@k.ro

Inserarea tabelelor

Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar în interiorul acestui marcaj se utilizeaza 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 - defineste spatiul lasat între celule (n, nr. întreg - pixeli).



CELLPADDING=n - defineste spatiul lasat dintre data din celula si chenarul celulei (n, nr. întreg - pixeli).

WIDTH=n - permite definirea latimii dorite a tabelului (n, în pixeli sau în procente).

HEIGHT=n permite definirea înaltimii dorite a tabelului (n, în pixeli sau în procente).

COLSPAN=n - permite unei celule sa se extinda pe mai multe coloane.

- permite unei celule sa se extinda pe mai multe rînduri.

GBCOLOR=culoare -permite definirea culorii de fond a unei celule.

ALIGN=pozitie - specifica alinierea orizontala a datei din celula. Optiunile posibile sunt: Left, Right, Center.

BACKGROUND=fisier_imagine     permite specificarea unei imagini grafice de fond în interiorul unei cellule.

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

Ex. Nr. 2 (Tabel2.html)

Efect

<HTML>

<HEAD>

<TITLE>Tabele</TITLE>

</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

Ex. Nr. 3 (Tabel3.html)

<HTML>

<HEAD>

<TITLE>Tabele</TITLE>

</HEAD>

<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

Exercitiu:

Construiti o pagina Web de prezentare a orasului în care locuiti. Înserati imagini cu monumente semnificative ale orasului. Structurati pagina utilizând un tabel fara chenar. Folositi pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html în directorul Elev al directorului radacina.



Document Info


Accesari: 2339
Apreciat: hand-up

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta

Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site


in pagina web a site-ului tau.



eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare




Copyright © Contact (SCRIGROUP Int. 2025 )