Tutorial lista HTML

Lista intr-o pagina HTML

Lista este o structura ce grupeaza elemente de acelasi fel. In HTML, lista poate fi folosita atat pentru a grupa continutul cat si pentru a crea meniuri de navigatie.

Listele pot fi de urmatoarele tipuri:

- ordonate: elementele sunt notate cu cifre, litere sau alte metode de ordonare

- neordonate: elementele sunt notate cu simboluri: cercuri, patrat

- definitii: elementele sunt insotite de descrieri

Definitiile elementelor HTML folosite

1. Tagul li:
• defineste un element din lista
• poate fi folosit in urmatoarele tipuri de liste: ol, ul, menu
• atributul value:
• defineste valoarea elementului
• poate fi folosit doar pentru ordonate
• ordonarea urmatoarelor elemente se face in functie de aceasta valoare
• este recomandata definirea aspectelor vizuale cu ajutorul CSS-ului
2. Tagul ul:
• defineste o lista neordonata
• folosirea atributului type pentru a seta marcatorii de inceput de linie nu este recomandata, folositi in schimb regulile CSS pentru a obtine aceste efecte
3. Tagul ol:
• defineste o lista ordonata
• Atributul start:
• defineste valoarea de inceput a ordonarii
• are valoare numerica
• Atributul type:
• defineste tipul ordonarii
• primeste urmatoarele valori: 1, a, A, i, I
• Atributul reversed:
• defineste ordinea ordonarii
• nu este suportat in toate navigatoarele WEB
4. Tagul dl:
• defineste o lista de definitii, fiecare element avand si o descriere
• foloseste elemetele dt (reprezinta un element din lista) si dd (reprezinta descrierea, descrierile pentru un anumit element) pentru a-si defini structura
5. Tagul dt:
• defineste un element dintr-o lista de tipul dl
6. Tagul dd:
• defineste o descriere a unui element de tipul dt
• poate contine text, imagini, linkuri, etc.

Lista neordonata

Lista neordonate este definita cu ajutorul tagului ul si contine elemente de tipul li.
Este recomandata definirea tipului de marcator cu ajutorul CSS-ului. Pentru a defini tipul se foloseste urmatoarul atribut list-style-type. In cazul nostru, acesta poate avea urmatoarele valori: circle (cerc gol), disc (cerc umplut), square (patrat) .
Exemplu - Lista neordonata simpla:
Rezultat:

• Element lista 1
• Element lista 2
• Element lista 3

Cod:

Lista ordonata

Lista ordonata se defineste cu ajutorul tagului ol si contine elemente de tipul li.
Tipul marcatorului se poate defini cu ajutorul atributului type, dar folosind list-style-type din CSS se poate accesa o varietate mai mare de tipuri.

Exemplu - Lista ordonata simpla:
Rezultat:

1. Element lista 1
2. Element lista 2
3. Element lista 3

Cod:

Buton HTML

Acest tutorial descrie folosirea butoanelor HTML intr-o pagina WEB.
Butoanele prezentate in acest articol sunt create in doua moduri.
Cu ajutorul tagului button. Acest tag este folosit explicit pentru creare de butoane. Butoanele create in acest fel pot contine imagini si text.
Cu ajutorul tagului input. In acest caz, valoarea atributul type trebuie sa fie button pentru a crea un buton, fiind posibila definirea mai multor tipuri de elemente cu acest tag (Ex: checkboxuri, casete text, selector de fisiere). Acest tip de buton accepta numai text.
Ambele tipuri au atributul type si pot avea valorile reset si submit. Un buton, care are una dintre aceste valori, este folosit in cadrul unui formular.

Definirea unui buton HTML cu ajutorul tagului button

Exemple:

1. Exemplu de buton simplu cu un javascript care va afisa un mesajul: "Butonul a fost apasat" 
• Rezultat:
  
• Codul folosit:
  
2. Exemplu de buton cu imagine (are aceeasi actiunea ca butonul precedent)
• Rezultat:
  
• Codul folosit:
  

Tagul button:

• defineste un buton
• in interiorul tagului se poate adauga continut (text, imagini)
• Atributul type:
• defineste tipul butonului
• este recomandata definirea atributului pentru a evita un comportament inconsistent pe diferitele navigatoare WEB
• accepta urmatoarele valori:
• button - i se pot atribui actiuni particulare
• submit - este folosit pentru a trimite continutul unui formular
• reset - este folosit pentru a reseta continutul unui formular
• Atributul value:
• defineste valoarea butonului
• a nu se confunda cu textul butonului
• Atributul disable:
• este folosit pentru a dezactiva butonul
• in HTML este suficient sa adaugi atributul fara nici o valoare pentru a dezactiva butonul
• in XHTML este necesara definirea atributului disabled="disabled" pentru a dezactiva butonul
• Atributul name:
• defineste un nume pentru button 

Definirea unui buton cu ajutorul tagului input

Acest buton este creat cu ajutorul tagului input folosind atributul type cu valoarea button.

• Rezultat:
  
• Codul folosit:

Explicatii:
Tagul input este folosit pentru a crea campuri folosite pentru inserarea datelor. Aceste campuri sunt folosite in interiorul unui formular form pentru a completa datele, care vor fi trimise pentru procesare pe un server. In cazul nostru se foloseste un input de tipul button, care este folosit pentru definirea unui buton. Butonul este folosit in mare parte pentru executarea unor actiuni javascript.

Cum sa adaugi un .swf la pagina ta HTML

Pentru a introduce o animatie .swf adaugati urmatorul fragment de cod in pagina HTML.
<embed height="200" src="https://sites.google.com/site/exempledeinformatica/hello.swf"   width="120"></embed>
Campurile height si width sunt inaltimea, respectiv latimea obiectului.
Campul src reprezinta calea catre fisierul .swf care este incarcat pe WEB.

Tutorial HTML: Imaginile și pagina ta WEB

Cum să adaugi o imagine în site-ul tău

Principalul mod de a introduce o imagine în pagina HTML este cu ajutorul tagului <img>.
In acest exemplu este exemplificata folosirea acestuia.

Cod:
<html>
<head>
<title>HTML imagine</title>
</head>
<body>
<img src="https://sites.google.com/site/exempledeinformatica/tutoriale-html/tutorial-html-prima-pagina-web/Prima mea pagina html.png"
 alt="Aici se introduce descrierea imaginii."/>
</body>
</html>

Rezultat:

Explicatii:

1. Tagul <img>:
1. este folosit pentru a defini imagini în pagina WEB
2. atributul src:
1. definește calea către imagine
2. este obligatoriu
3. calea poate fi definita astfel:
1. cale relativa: se stabilește în funcție de poziția fișierului HTML și a imaginii
2. cale absoluta: locația completa a imagini (Ex: adresa URL a pagini)
   
3.  atributul alt:
1. este folosit pentru a stabili un conținut text alternativ în cazul în imaginea nu poate fi afișată
   
2. este recomandat sa conțină
1. o scurta descriere a imaginii
2. descrierea paginii țintă dacă imaginea este un link
3. "" în cazul în care imaginea este o decorație nesemnificativa
4. atributele height și width:
1. sunt folosite pentru a stabili înălțimea(height) și lățimea(width) imaginii
2. valorile pentru aceste atribute sunt definite în pixeli
   
3. aceste atribute ajuta navigatorul WEB sa rezerve spațiul destinat imaginii
4. nu este recomandat să scalați o imagine mare la o dimensiune mai mica cu ajutorul acestor atribute, deoarece utilizatorul va fi obligat să descarce imaginea originala, cu toate că aceasta este afișată mai mică în navigatorul WEB
5. atributul usemap:
1. este folosit pentru a mapa porțiuni din imagine
2. acest atribut nu poate fi folosit dacă imaginea se afla în interiorul unui link sau a unui buton
   
3. porțiunilor mapate li se pot atribui linkuri sau acțiuni
6. atributul ismap:
1. marchează imaginea ca find mapata pe partea server
2. atributul poate fi folosit doar dacă acesta se afla în interiorul unui link valid (elementul <a> sa aibă atributul href valid)
3. când se dă click pe imagine se trimit coordonatele punctului către server
7. atributul title:
1. poate fi folosit pentru a afisa un text descriptiv cand mouseul este deasupra imaginii

Tutorial HTML: Prima pagina WEB

1. Introducere

 

Acest tutorial contine pasii pentru a crea o pagina un exemplu "Hello World" pentru limbajul HTML.
Pagina creata va avea un  titlu si continut text.
Pentru realizarea exemplului este nevoie de un editor text precum Notepad.

2. Crearea exemplului

1. Se deschide aplicatia "Notepad" (se pot folosi si alte editoare precum Notepad++, Eclipse).
2. Se copiaza codul de mai jos:
   <html>
     <head>
       <title>Site WEB HTML </title>
     </head>
     <body>
       Prima mea pagina HTML.
     </body>
   </html>
3. Se salveaza cu comanda "Save As..." folosind extensia ".html". Exemplu: index.html
4. Se deschide fisierul cu un browser WEB precum: Firefox, Chrome sau Internet Exporer
5. Rezultatul va fi o pagina HTML cu titlu "Site WEB HTML" si continutul "Prima mea pagina HTML."

 

3. Explicații

1. Tagul html
1. notifică navigatorul WEB de conținutul html al fișierului
2. acesta este elementul părinte al documentului
   
3. restul tagurilor trebuie introduse în interiorul acestuia
4. doar tagul <!DOCTYPE> face excepție de la regula 3
2. Tagul head
1. reprezintă antetul documentului
2. următoarele elemente pot introduse în interiorul acestuia
1. title - definește titlul paginii WEB
2. meta - definește metadata (Ex: descrierea paginii, cuvinte cheie, autor)
3. script - cu ajutorul acestuia putem folosi scripturi client (Ex: javascript)
4. noscript - este folosit pentru a afișa conținut alternativ în cazul în care scripturile sunt dezactivate
5. style - definește regulile CSS ce se vor aplica documentului
6. link - cu ajutorul acestuia se poate adăuga un fișier extern CSS
3. Tagul body
1. reprezintă conținutul paginii WEB
2. acesta poate conține:
1. imagini - <img>
2. text      - <p>(paragraf) <h1> ... <h6>(titluri de diferite mărimi)
3. tabele   - <table>
4. linkuri   - <a>
5. aplicații folosite pentru afișare de conținut multimedia, jocuri browser, widget-uri, etc