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>[email protected]</I><HR COLOR=red>

</BODY>

</HTML>

Efect

Salut!

Ma numesc Motanel!

[email protected]

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>[email protected]</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

[email protected]

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: 2323
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. 2024 )