Document, comentariu, eseu, bacalaureat, liceu si facultate
Top documenteAdmitereTesteUtileContact
      
    


 


Ultimele referate adaugate

Adauga referat - poti sa ne ajuti cu un referat?

Politica de confidentialitate



Ultimele referate descarcare de pe site
  CREDITUL IPOTECAR PENTRU INVESTITII IMOBILIARE (economie)
  Comertul cu amanuntul (economie)
  IDENTIFICAREA CRIMINALISTICA (drept)
  Mecanismul motor, Biela, organe mobile proiect (diverse)
  O scrisoare pierduta (romana)
  O scrisoare pierduta (romana)
  Ion DRUTA (romana)
  COMPORTAMENT PROSOCIAL-COMPORTAMENT ANTISOCIAL (psihologie)
  COMPORTAMENT PROSOCIAL-COMPORTAMENT ANTISOCIAL (psihologie)
  Starea civila (geografie)
 

Ultimele referate cautate in site
   domnisoara hus
   legume
    istoria unui galban
   metanol
   recapitulare
   profitul
   caract
   comentariu liric
   radiolocatia
   praslea cel voinic si merele da aur
 
despre:
 
Coduri HTML
Colt dreapta
Vizite: ? Nota: ? Ce reprezinta? Intrebari si raspunsuri
 
p6d19dl

2.1. Notiuni generale despre paginile web
Paginile web sunt fisiere text, care se pot realiza cu un editor obisnuit, apoi salvate ca "text only", insa extensia trebuie sa fie obligatoriu htm sau html. Adaosul la textul obisnuit sunt codurile HTML (pot fi numite tag-uri, etichete, marcaje sau balize) care marcheaza documentul.
Comparatia potrivita ar fi cu editorul Word: pentru a marca titluri si subtitluri, marim dimensiunea fontului, apasam butonul bold, etc. sau ii schimbam stilul in Heading 1 si Heading 2. Similar, in limbajul HTML, care este un limbaj de marcare (HyperText Markup Language) adaugam balizele H1, B etc.
Un "navigator" (cum ar fi: Internet Explorer, Opera sau Netscape) citeste aceste fisiere text si interpreteaza codurile pentru a afisa corect continutul documentului. Balizele nu sunt afisate, ele doar "spun" navigatorului (browserului) cum sa afiseze continutul lor.
Concret, sa luam urmatorul exercitiu:
Deschide editorul Notepad (Start - Programs - Accessories - Notepad) si scrie un text: ANTIRID - Pagina de ras - . Apoi salveaza documentul cu numele acumstiu.html (extensia html este obligatorie si este preferabil sa nu folosesti spatii in numele fisierului).
Inchide Notepad si da dublu-click pe fisierul pe care tocmai l-ai creat. Se va deschide Internet Explorer sau Netscape Navigator si va afisa pagina ta web.

2.2. Coduri HTML de baza
Sa presupunem ca vrem ca textul ANTIRID sa fie titlul: tot ce trebuie sa facem este sa deschidem din nou fisierul html in Notepad si sa marcam cuvantul cu balize pentru titlu (in engleza - heading). Fisierul va arata astfel:
<h1>ANTIRID</h1> - Pagina de ras Observa ca trebuie sa indici sfarsitul titlului, printr-o baliza similara, care are in plus un slash "/". Tot ce se va gasi intre <h1> (codul de inceput) si </h1> (codul de final) va fi afisat de navigator ca fiind "titlu de nivel 1" - heading 1.
Intoarce-te in navigator si fa click pe butonul Refresh (respectiv Reload, in Netscape) sau apasa F5. Ar trebui sa arate aproximativ in modul urmator:

Un document HTML corect are doua sectiuni: o parte de antet (head), unde se descrie documentul, si o parte de continut (body) care cuprinde ceea ce se va afisa in browser. Pagina cu continut html trebuie sa fie declarata ca atare prin eticheta . Astfel, codul sursa trebuie sa arate in felul urmator:
<HTML>
<HEAD>
</HEAD>
<BODY>




<h1>ANTIRID</h1> - pagina de ras -

</BODY>
</HTML>
Observa ca se marcheaza cu coduri inceputul si sfarsitul fiecarei sectiuni.
In cadrul sectiunii <head> vom invata un singur cod: <title>, care marcheaza titlul logic al documentului. Adauga, in sursa din Notepad, in sectiunea <head>, urmatoarele:
<HEAD>
<title>Pagina personala</title>
</HEAD> , apoi salveaza si verifica in browser. Pe bara de titlu a navigatorului, in partea de sus, a aparut "Pagina personala".
In continuare, ne vom ocupa de partea de continut a documentului, cuprinsa intre balizele <body> si </body>.
Vom marca "pagina de ras" ca fiind titlu de nivel 3 (Heading 3), apoi vom adauga un paragraf folosind baliza <p>.
<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>

<p>
Doi programatori stau intr-un bar.
</p>

Salveaza si verifica noul aspect. Sa mai adaugam doua paragrafe si o linie orizontala (horizontal rule).
<HTML>
<HEAD>
<title>Pagina personala</title>
</HEAD>
<BODY>

<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>

<hr>

<p>Doi programatori stau intr-un bar.</p>

<p>- Vezi tipa aceea? Uite ce "properties" are.</p><p>- Da.
Am "testat-o" aseara. Sunt "read-only".</p>

</BODY>
</HTML>
Doua observatii aici:
*** Prima, ca baliza <hr>, pentru linia orizontala, nu are nevoie de baliza corespondenta pentru inchidere. Este oarecum logic - nu prea este necesara.
*** A doua observatie este ca browserul interpreteaza formatarile exclusiv citind balizele - daca ii semnalezi, in mijlocul unui rand din Notepad, ca se termina paragraful si incepe unul nou, atunci se va conforma si va afisa un alt paragraf.
Sa presupunem ca vrem sa evidentiem in text cuvantul "programatori". Baliza care se foloseste pentru text ingrosat este <b> (de la Bold). Astfel, aplicand regulile invatate, vom avea urmatoarea secventa in sursa:
<p>Doi <b>programatori</b> stau intr-un bar.</p>
Observam ca balizele HTML se pot intercala - in cadrul paragrafului marcat cu <p>, respectiv </p>, avem un text marcat cu <b>, respectiv </b> pentru inchidere. Similar, pentru a aplica aceluiasi text o formatare cu litere cursive (inclinate), folosim baliza <i> (de la Italic):
<p>Doi <b><i>programatori</i></b> stau intr-un bar.</p>
Regula: Ultima baliza deschisa este prima care se va inchide.
Spune de ce secventa urmatoare NU este corecta:
<p>Doi <b><i>programatori</b></i> stau intr-un bar.</p>

2.3. Introducerea imaginilor
Imaginile care se pot introduce in paginile pentru web trebuie sa fie in format jpg, gif sau png. Codul este <img>, care are obligatoriu un atribut prin care se specifica adresa imaginii.
Sa aducem in directorul cu fisierul nostru, acumstiu.html, o imagine - de exemplu, londra.jpg. O vom apela din sursa (in Notepad) prin sintaxa:
<img src="londra.jpg">


Daca imaginea pe care dorim sa o apelam (1sigla.gif) se afla la o adresa pe Internet, atunci vom scrie toata calea:
<img src="https://www.1educat.ro/imagini/1sigla.gif">2.4. Liste
Listele pot fi de doua feluri: liste ordonate - <ol> - (ordered lists) sau neordonate - <ul> - (unordered lists). Itemii cuprinsi intr-o lista se marcheaza cu baliza <li> (list item).
Sa cream o lista ordonata:
<p>Vrei sa stii daca esti bolnav de informatica? Esti bolnav daca:</p>
<ol>
<li>In fiecare dimineata iti faci un backup</li>
<li>Ultimul tau gand inainte de a adormi este "Shutdown complete".</li>
<li>Cauti butonul "Cancel" dupa ce ai apasat un buton gresit la lift si te miri cat de saraca e interfata utilizator.</li>
<li>Faci dublu click pe butonul de la lift.</li>
<li>Din tren, admiri scrolling-ul peisajului.</li>
</ol>
2.5. Tabele
Vom crea un tabel cu doua linii si trei coloane. Codul <tr> (de la table row) se foloseste pentru a marca inceputul, respectiv sfarsitul unei linii, iar <td> se foloseste pentru celule de tabel (table data).
<table border="1">
<tr>
<td>lin 1, col 1</td>
<td>lin 1, col 2</td>
<td>lin 1, col 3</td>
</tr>
<tr>
<td>lin 2, col 1</td>
<td>lin 2, col 2</td>
<td>lin 2, col 3</td>
</tr>
</table>
Da diverse valori atributului "border", pentru a vedea efectul.
2.6. Hyperlinkuri
Un link (sau un text activ) in cadrul unui fisier html se marcheaza prin codul <a>, respectiv </a> pentru inchidere. Pentru a indica fisierul la care se face referire, se utilizeaza atributul href (de la hypertext reference).
Copiem (sau cream) in directorul in care lucram un alt fisier html - de exemplu computer.html. Inseram sintaxa de hyperlink pentru cuvantul "programatori" din textul initial, in fisierul "acumstiu.html", deschis cu Notepad:
<p>Doi <a href="computer.html">programatori</a> stau intr-un bar.</p>
Revenind in browser, da F5 pentru Refresh, apoi fa click pe cuvantul activ pe care tocmai l-ai creat. Ar trebui sa te conduca la fisierul "computer.html". Daca acest lucru nu se intampla, verifica daca:
1. fisierul "computer.html" exista in directorul in care este si "acumstiu.html"
2. sintaxa de hyperlink este corecta, conform cu modelul de mai sus.
1. Sa presupunem ca vrei sa ai propriul tau fisier html cu referinte la cateva pagini pe care le accesezi mai des, pentru a nu mai tasta de fiecare data adresa fiecaruia. Vei crea o lista neordonata, in care vei scrie fiecare link favorit. Astfel, cand intri pe Internet, vei deschide pagina ta de "Favorites" de pe propriul calculator, care iti va simplifica lucrul. Pentru ca fiecare link accesat sa fie deschis intr-o noua fereastra a browserului, trebuie sa adaugi la fiecare hyperlink atributul "target" cu valoarea "_new".
Deschide Notepad si creaza un nou fisier: "favorite.html", pe care il salvezi pe Desktop. Copie exemplul de mai jos (insereaza textul si da click dreapta pe el, apoi Copy; mergi inapoi in Notepad, apasa butonul dreapta al mouse-ului, apoi Paste). Inlocuieste linkurile si textele active cu propriile tale linkuri:
<html>
<head><title>Firul Ariadnei</title></head>
<body>

<h2>Linkuri favorite</h2>

<hr>

<ul>
<li>
<a href="https://www.google.com" target="_new">Motor de cautare</a>
</li>

<li>
<a href="https://www.yahoo.com" target="_new">Director web</a>
</li>

<li>
<a href="https://www.1educat.ro" target="_new">Oferte educationale</a>
</li>

<li>
<a href="https://www.academiaonline.ro" target="_new">Cursuri</a>
</li>

<li>
<a href="https://www.xprim.ro" target="_new">Exprima-te pe web</a>
</li>
</ul>

</body>
</html>
2. Folosind balizele invatate in aceasta lectie, creaza fisiere html cu diverse continuturi. Experimenteaza si iar experimenteaza. Deschide sursele paginilor web pe care le ai in propiul computer (din browser: View - Source) si invata coduri noi.
3. Daca ai realizat un site si l-ai incarcat pe Internet, scrie linkul in Forumul de la www.elearning-forum.ro (adresa directa: https://www.elearning-forum.ro/forum/viewforum.php?f=9).


Colt dreapta
Creeaza cont
Comentarii:

Nu ai gasit ce cautai? Crezi ca ceva ne lipseste? Lasa-ti comentariul si incercam sa te ajutam.
Esti satisfacut de calitarea acestui document, eseu, cometariu? Apreciem aprecierile voastre.

Nume (obligatoriu):

Email (obligatoriu, nu va fi publicat):

Site URL (optional):


Comentariile tale: (NO HTML)


Noteaza documentul:
In prezent fisierul este notat cu: ? (media unui numar de ? de note primite).

2345678910

 
Copyright© 2005 - 2024 | Trimite document | Harta site | Adauga in favorite
Colt dreapta