vineri, 5 iunie 2015

8.06-12.06.2015 Aplicatii practice HTML

Soft educational utilizat pentru predarea lectiei:
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.

valoarecod
ăă
ĂĂ
ââ
ÂÂ
îî
ÎÎ
şş
ŞŞ
ţţ
ŢŢ

Liste in HTML
HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul> una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type si start pentru a realiza lista cea mai potrivita cerintelor tale.
- <ul> - unsorted list, buline
- <ol> - ordered list, numere
- <dl> - definition list, lista de definitii.

HTML - Lista ordonata

Foloseste tag-ul <ol>pentru a incepe o lista ordonata.
Prin punerea <li></li> (list item) intre tagurile <ol> si </ol> semnalizezi browser-ului elementele listei.
Exemplu:
<h4 align="center">Obiective</h4>
<ol>
<li>Sa gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

Poti incepe lista cu orice alt numar doresti specificandu-l insa cu ajutorul atributului start.
Exemplu:
<h4 align="center">Oviective</h4>
<ol start="4" >
<li>S gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

HTML - Alte tipuri de liste ordonate

In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor arabe poti folosi cifre romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau majuscule. Foloseste atributul typepentru a modifica tipul numerotarii.
Exemplu:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Litere miciMajusculeNumere romane cu litere miciNumere romane cu majuscula
a. Un loc de munca
b. Bani
c. Alt oras
A. Un loc de munca
B. Bani
C. Alt oras
  i. Un loc de munca
 ii. Bani
iii. Alt oras
  I. Un loc de munca
 II. Bani
III. Alt oras

Liste nesortate

Creaza o lista nesortata cu ajutorul tagului <ul>. 
Listele nesortate deasemenea sunt de mai multe tipuri si anume, patratele buline si cerculete.
Valoarea standard redata de majoritatea browser-elor sunt bulinele

Exemplu:
<h4 align="center">lista de cumparaturi </h4>
<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>
Exemplu:
Tag-urile <ul> si <li> pot avea un atribut type care satileste caracterul asfisat in fata fiecarui element al listei.valorile posibile al acestui atribut sunt:
  • "circle" (cerc)
  • "disc" (disc plin) (valoarea prestabilita);
  • "square" (patrat)
Listele de definitii, create utilizand elementul <DL>, constau in general dintr-o serie de perechi termen/definitie (desi listele de definitii pot avea alte aplicatii). 

Exemplu:


SARCINA DE LUCRU:
1. Urmariti demonstratia profesorului pentru exemplul urmator:

2. Scrieti urmatorul cod HTML, salvati si observati rezulatul:

<html> 
<head>
<title>Liste HTML</title>
</head>
<body>
<h4 align="center"><FONT COLOR="RED"><B>Lista de cumparaturi</B> </FONT></h4> 
<ul>
   <li>lapte</li>
   <li>branza</li>
   <li>oua</li>
   <li>zahar</li>
</ul>
<DL>
    <DT>to elapse
        <DD>a trece, a se scurge
   <DT>I've never seen
       <DD> n-am (mai) vazut (niciodata)
</DL>
</body>
</html>


3. Scrieti codul HTML pentru a realiza urmatoarea lista:


4. Scrieti codul HTML pentru a realiza urmatoarea lista definitie ce contine listele ordonate si neordonate:
Listele pot deasemenea fi incapsulate si diferite tipuri de liste pot fi utilizate impreuna, ca in exemplul urmator, care este o lista de definitii care contine o lista neordonata (ingredientele) si o lista ordonata (procedura):
Ingredientele:
  • 100 g. faina
  • 10 g. zahar
  • 1 ceasca apa
  • 2 oua
  • sare, piper
Procedura:
  1. Amestecati ingredientele uscate.
  2. Turnati ingredientele ude.
  3. Amestecati timp de 10 minute.
  4. Coaceti timp de o ora la 300 de grade.
POSTATI LA SFARSITUL OREI PE GRUPUL CLASEI  !!!
4. Urmariti instructiunile de mai jos " Site publicitar" / "Site de prezentare" si realizati sarcina propusa pentru unul din proiecte.
Termen de predare proiect: 19.06.2015 



Niciun comentariu:

Trimiteți un comentariu

Rețineți: Numai membrii acestui blog pot posta comentarii.