luni, 11 martie 2013

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 

Niciun comentariu:

Trimiteți un comentariu