Tutorial HTML - Div

Tagul div este nu este altceva decat un suport pentru alte taguri. Iata cateva atribute ale acestui tag:

- id
- title
- style
- height
- width

Restul atributelor nu se folosesc in general functiile lor fiind cedate CSS-ului.

Iata si un exemplu de folosire a tagului <div> :

<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>

</div>

<div id="content" align="left" bgcolor="white"> <h5>Titlu Aici </h5>

<p>Iar aici va fi si continutul paragrafului. Iar a...</p>

</div>

Vizualizare

Titlu Aici

Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului.

Tagul div este mult mai usor de folosit decat tagul table, de aceea este recomandabil si preferabil, folosirea lui ori de cate ori este nevoie.

<2>Tagul Div - usurinta in modificare

Unul dintre motivele pentru care este usor de folosit este introducerea noilor date cu facilitate si vom si exemplifica acest locru.

In exemplul urmator am adaugat cateva campuri noi paginii exemplificate mai sus.

<div id="menu" align="right" >
<a href="#">HOME</a> |
<a href="#">CONTACT</a> |
<a href="#">ABOUT</a> |
<a href="#">SITEMAP</a>
</div>

<div id="content" align="left" >
<h5>Titlu Aici </h5>
<p>Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului.</p>
<h5 >Titlu 2 Aici </h5>
<p>Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2.</p>
</div>

Liniile albastere au fost adaugate dupa formatarea initiala a paginii.

HOME | CONTACT | ABOUT |SITEMAP

Titlu Aici

Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului.

Titlu 2 Aici

Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2.

Comentarii

mel

Am folosit pentru un meniu "campuri ascunse", merge bine pentru unul singur dar daca mai pun inca unul in el(in cazul de mai jos "enunt"), trebuie sa fac 2 click-uri ca sa se deschida al doilea. Nu imi dau seama ce nu se inchide cum trebuie. Am folosit javaScript pentru definirea functiilor.
<p><a href="#" onClick="afiseazaMeniu(1); return false;">Laborator 1</a> </p>
<ul id="1" class="ascunde">
            <p><a href="#" onClick="afiseazaMeniu(2); return false;">Enunt</a></p>
<ul id="2" class="ascunde">
<p>Afiseaza enuntul</p>
</ul>
            <p><a href="laborator1.htm" target="destinatie">Rezolvare</a></p>
     </ul>

17-Oct-2009 - 18:56

Barbulescu

Salut.
Sunt la inceput de drum si as vrea daca se poate sa imi recomanzi si mie site-uri unde pot gasii si eu material ptr a reusi sa invat cat de cat HTML.Multumesc

30-Nov-2009 - 06:32

catalin

daca situl asta nu este de ajuns iti recomand http://www.w3.org/TR/html4/
vei gasi acolo toate specificatile cu privire la limbajul de programare HTML. Daca nu sti engleza scrie in google.ro "tutorial html" poti incepe de acolo.
Bafta

30-Nov-2009 - 09:19

Gaby

Eu m-am descurcat binisor dupa ce am studiat de pe http://www.tutoriale.far-php.ro . Succes!

05-Dec-2009 - 11:08

Vladut

Foarte bune tutorialele.Am doar o singura problema: Cum pot face Doua meniuri...unu aliniat la stanga si unu aliniat la dreapta dar sa fie pe acceasi rand.Ca la Google...Ms

24-Dec-2009 - 13:24

ed

Doua meniuri ca in Google = doua div-uri. In fiecare div pui ce vrei, chiar si meniuri.
Poti vedea cum au realizat pagina cei de la Google cu click dreapta pe pagina si View page source (sau Vezi sursa paginii).

11-Jan-2010 - 04:29

Trimite un comentariu!