vineri, 8 iunie 2012

12 iunie: Introducere în HTML








HTML = Hyper Text Markup Language 






A. Noțiuni teoretice:

1.Definiție:

           HTML -ul este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Este codul ce stă la baza paginilor web.




2. Tagurile HTML 
Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
  • taguri pereche (un tag de inceput si unul de incheiere). 
    • Exemple: <HTML> si </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>
  • taguri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>
 
  • <HTML> : cu acest tag incepe orice document HTML.
                    Prin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru a il putea afisa.</HTML>- este tag-ul de incheiere al tag-ului <HTML>. Codul oricarui document se termina cu acest tag. 
  • <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs. </HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD> 

  • <TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tau. Astfel, textul pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului. </TITLE> - este tag-ul de incheiere al tag-ului <TITLE>. Arata sfarsitul titlului documentului. 

  • <BODY> - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre browser, pe ecranul monitorului. </BODY> - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce vei scrie dupa acest tag nu va mai fi afisat.


B. Aplicație demonstrativă:

Indicație:

  • Faceți click dreapta pe Desktop, selectați New -> Text Document și se va deschide un fișier text, editabil și scrieți codul ca în imagine: 

 

  • Dați File - Save as - cu numele demo.html
        Nu uitați extensia .html! Fără aceasta scriptul nu se va deschide în browser! 
  • Se va afișa astfel
  • După ce vom completa codul HTML, în browser se va afișa astfel:




 Și aici este codul:


Am folosit în plus:

  • tagul <center> </center> - are rolul de a centra textul în pagină.
  • În aplicație centrăm linia ce am introdus-o prin tagul <hr> și o colorăm cu verde astfel:
      • color = "green" - setează culoarea verde pentru linie
      • align = "center" - setează linia pe centru paginii
      • size = "10"  - setează grosimea
      • with = "70%" - setează lungimea
  • tagul <p> marchează un nou paragraf
  • tagurile <ul> <li>  - marchează listele


Temă de laborator:
     


    
Creaţi într-o formă la alegere o pagină web cu informaţii despre vacanţă, folosind limbajul HTML.
Aceasta trebuie să cuprindă elementele - tag-urile – discutate la clasă:

·       Titlul de pagină
·       Culoare background
·       Paragrafe
·       Liste
Primii trei elevi care termină, prezină tema de laborator şi dacă folosesc cel puţin 3 taguri  noi (nu se regăsesc în aplicaţia demonstrativă), vor primi nota 10 .
Aplicațiile lucrate în clasă se vor trimite prin email la adresa padurariuemanuela1@yahoo.com și georgianac.scoala@gmail.com.




Linkuri utile! (aici găsiți taguri noi!)
Succes!  

Niciun comentariu:

Trimiteți un comentariu