Grupul Scolar "Carmen Sylva", Eforie Sud


 

Club web Carmen Sylva 2002

 

 

Home
De ce un curs de web?
Introducere in HTML
Primul HTML
Editoare HTML
Tagurile HTML
Elementele de baza Formatarea
Grafica
Legaturi
Caractere speciale
Preformatarea
Tabele
Frame-uri
Java script, Java applets
Servere de web
Design de web
Dezvoltare de web
Proiecte
Evaluare
Resurse

Primul document HTML

Documentele HTML sunt documente text simple care contin coduri (taguri) citite de browsere. Browserele utilizeaza codurile pentru formatarea textelor si afisarea de imagini si legaturi.

Utilizand un numar mic de taguri (6) vom crea primul document HTML. Limbajul HTML nu este case senzitiv.

6 comenzi de baza

Titlul HTML-ului (nu va apare pe ecran cand documentul este citit de browser)
Orice document trebuie sa aiba un titlu.Desemnati titlul documentuluiintroducandu-l intre codurile <title> si </title> ca in exemplul urmator:

<title>Primul meu HTML</title>

Titlurile din pagina (apar pe ecran) - Header
Puteti avea intr-un document pana la 6 nivele de titluri de la h1 cel mai mare pina la h6 cel mai mic. Pentru a insera un titlu in document se incadreaza textul respectiv intre intre tagurile <h1> si </h1> ca in exemplul urmator:

<h1> Ce mai fac eu in weekend</h1>
<h2> Ce mai fac eu in weekend</h2>
<h3> Ce mai fac eu in weekend</h3>
<h4> Ce mai fac eu in weekend</h4>
<h5> Ce mai fac eu in weekend</h5>

Paragrafe
Toate textele din documentele HTML sunt impartite in paragrafe daca nu sunt introduse alte comenzi. Puteti indica ca paragraful s-a sfarsit introducand un tag <p>. Aceasta comanda va insera un rand nou si ENTER. Comanda de paragraf nu are si cod de inchidere (NU exista codul </p>)

Hyperlegaturi
Forta HTML-urilor este data de posibilitatea legaturilor inserate in pagina. Daca doriti sa dati ocazia celor care va viziteaza pagina sa sara la un alt HTML trebuie sa introduceti doua elemente: ancora si referinta. Ancora este ceea ce cititoul va vedea si va accesa cu mousul. Referinta este calea completa pe retea catre fisier (URL-ul). De exemplu:

<a href="http://www.lefo.ro/weather">Vremea live la Eforie</a>
"Vremea live la Eforie" este ancora si va apare colorata in albastru si subliniata. Referinta este URL-ul paginii de web care va fi accesata. Ea va fi accesata prin protocol HTML de pe serverul www.lefo.ro din directorul weather. Daca nu se precizeaza numele fisierului este accesat automat un fisier cu numele index.htm sau index.html.

  • Protocolul poate fi: html, ftp, gopher, telnet
  • Protocolul sau serverul poate fi omis daca referinta se face catre un fisier din acelasi director
  • Daca fisierul se afla intr-un subdirector atunci in cadrul referintei este trecut subdirectorul si numele fisierului cu extensia.

Inserarea de imagini
Introducerea unei imagini in document se face cu ajutorul tagului <img src="numefisier"> unde numefisier este numele fisierului. De exemplu:

<img src="logo.gif"> va afisa fisierul logo.gif care trebuie sa se gaseasca in directorul curent.

Daca imaginea se gaseste intr-un alt director sau pe alt calculator din Internet se poate accesa cu un tag de tipul:

<img src="http://194.102.193.1/document_images/logo.gif">

Liste
Cele mai obisnuite tipuri de liste sunt cele ordonate sau neordonate. Intr-o lista ordonata itemii sunt precedati de un numar. Intr-o lista neordonata itemii sunt precedati de un bulet. Tagul de inceput al listei este

<ol> pentru cea ordonata respectiv
<ul> pentru cea neordonata

In amandoua listele itemii se disting fiind separati de tagul <li>
Sfarsitul listelor este dat de tagul </ol> sau </ul>

Exemplu:

<ul>
<li>Romana
<li>Matematica
<li>Sport
</ul>

Exercitiu:

  1. Deschideti un editor text (Notpade, Write, Word)
  2. Editati un fisier in care sa folositi toate cele 6 comenzi de mai sus
  3. Salvati fisierul cu extensia htm sau html (daca ati utilizat alt fisier decit Notpade, asigurati-va ca se face salvare in format text)
  4. Deschideti un browser (Netscape Navigator sau Internet Explorer) si incarcati in el fisierul salvat
  5. Reluati comenzile de la punctele 1-4 facand modificari in fisier si observati rezultatul.




Coduri culori

Tester culori
     

| Home | Lefo | Carmen Sylva |
Pagina a fost updata ultima oara pe 09-Oct-2004 9:16 PM
Pentru comentarii legate de aceasta pagina [email protected]