Pentru a putea vedea pagina, va trebui să folosești un browser.
Browser-ele sunt programele de internet care interpretează
codurile HTML, asemănătoare cu acele pe care le-ai copiat și
salvat în notepad. Acestea transforma codul HTML într-o pagină
web care poate fi citită de orice internaut. Cele mai folosite
browsere sunt:
Internet Explorer
FireFox
Opera
Vizualizarea primei pagini
Pentru a putea vizualiza pagina web, trebuie să deschizi fișierul
"index.html" într-un browser.
- Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta înfățișare: - Element - este un tag complet, având un de deschidere și unul de închidere . - Atribut - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.
- Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta înfățișare: - Element - este un tag complet, având un de deschidere și unul de închidere . - Atribut - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.
Deocamdată trebuie doar să reții că un tag este o comandă pe care browser-ul o interpretează, că un element este un tag complet, iar un atribut personalizează și modifică un element în HTML.
O pagină web are în componență două elemente de bază.
O pagină web are în componență două elemente de bază.
Conținutul paginii va fi aici
Un document HTML întotdeauna va începe și se va termina cu un tag și respectiv .
Un document HTML întotdeauna va începe și se va termina cu un tag și respectiv .
Elementul <head> este cel care urmează. "Head" nu are nici o funcție vizibila(se pot insera aici printre altele coduri Javascript sau CSS)
Ceea ce vei scrie între cele două tag-uri title(</b></i> și <i><b>) va putea fi vizualizat ca și numele browser-ului, de obicei în partea din stânga sus. Alăturat avem și codul sursa:
</b> Prima mea pagina web<b>!
Elementul
Elementul
Elementul body este cel care definește începerea conținutului paginii propriu-zise (titluri paragrafuri fotografii ,muzica și orice altceva).
Body încapsulează tot conținutul paginii.
</b> Prima mea pagina web<b>!
Salut Gâscă! Aici voi pune mai târziu conținutul!
Acționează ca o capsula asupra conținutului.
Acționează ca o capsula asupra conținutului.
Paragraf
Titlu (heading)
Ingroșat (bold)
Inclinat (italic)
underline
Dacă vrei să aliniezi în mod diferit anumite elemente ale pagini tale, atunci ai la dispoziție atributul align. Poți alinia la stânga (left), dreapta (right) , la mijlocul (center),la ambele margini(justify). Prin default elementele se aliniază la stânga
Dacă vrei să aliniezi în mod diferit anumite elemente ale pagini tale, atunci ai la dispoziție atributul align. Poți alinia la stânga (left), dreapta (right) , la mijlocul (center),la ambele margini(justify). Prin default elementele se aliniază la stânga
</b> Alinierea paragrafelor </<b>title> </head></b></h2></li> <li><h2><b> <body> </b>
<br />Este primavara!
<br /><b>
<br /><center><img src="img8.jpg" alt=""></center>
<br /><h2><b>Attribute</b> <b>Options</b> <b>Function</b> </h2> <ul><li><h2><b>Attribute</b> <b>Options</b> <b>Function</b> </h2></li> <li><h2><i>align</i> right, left, center , justify -Aliniere orizontală</h2></li> <li><h2><i>valign </i> top, middle, bottom -Aliniere verticală </h2></li> <li><h2><i>bgcolor</i> numeric, hexidecimal, sau valoare RGB- Un background în spatele elementului </h2></li> <li><h2><i>background</i> URL- O imagine în spatele elementului </h2></li> <li><h2><i>id </i> Definit de user –Numește un element <a href="/css-inline-ii-sintaxa-css-ii-a-tipuri-de-selectori.html">care se va folosi cu CSS </a></h2></li> <li><h2><i>class </i> Definit de user- Clasifică un element care se va folosi cu CSS </h2></li> <li><h2><i>width</i> Valoare numerica -Specifica lățimea unui tabel, imagine sau căsuțe de tabel. </h2></li> <li><h2><i>height</i> Valoare numerica -Specifică înălțimea unui tabel, imagine sau căsuțe de tabel. </h2></li> <li><h2><i>title</i> Definit de user "Pop-up". Afișează un titlu pentru un element stabilit.</h2></li> </ul>
<br /><center><img src="img9.jpg" alt=""></center>
<br /><h2>
<br /></h2> <ul><li><h2>
<br /></h2></li> <li><h2>Acesta este un font de marime 5 </h2></li> <li><h2>
<br /></h2></li> <li><h2>This text is hexcolor #990000
<br />This text is red </h2></li> <li><h2>
<br />This paragraph has had its font...
<br /></h2></li> </ul>
<br /><center><img src="img10.jpg" alt=""></center>
<br />
<br /><center><img src="img11.jpg" alt=""></center>
<br />
<br /><center><img src="img12.jpg" alt=""></center>
<br />
<br /><center><img src="img13.jpg" alt=""></center>
<br />
<br /><center><img src="img14.jpg" alt=""></center>
<br />
<br /><center><img src="img15.jpg" alt=""></center>
<br /><h2><b>Legenda: </b>ul = unordered list ol = ordered list li = list item dl = definition list dt = term in a definition list dd = description of a term in a definition list</h2> <ul><li><h2><b>Legenda: </b>ul = unordered list ol = ordered list li = list item dl = definition list dt = term in a definition list dd = description of a term in a definition list</h2></li> <li><h2>http://www.drogoreanu.ro/tutorials/html</h2></li> </ul>
<br /><center><img src="img16.jpg" alt=""></center>
<br /><h2>tag-ul<img/></h2> <ul><li><h2>tag-ul<img/></h2></li> <li><h2>Atributul "src" este prescurtarea pentru "source" (sursa)- se foloseste pentru a indica locatia fotografiei.</h2></li> <li><h2>Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage". </h2></li> <li><h2>Ex.:</h2></li> <li><h2><img src="http://example.com/folder/image.jpg" alt="imagine albastra "/></h2></li> </ul>
<br /><center><img src="img17.jpg" alt=""></center>
<br /><h2>Pentru a stabili inaltimea si latimea unei imagini <a href="/tipurile-de-memorie-a-sistemelor-de-calcul.html">sunt folosite atributele </a><i>height</i> si <i>widith.</i></h2> <ul><li><h2>Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele <i>height</i> si <i>widith.</i></h2></li> <li><h2><img src="../img/image.jpg" alt="imagine albastra" width="100" height="50" /></h2></li> <li><h2><b>Alinierea orizontala si verticala a unei imagini</b></h2></li> <li><h2>Se folosesc atributele <i>align</i> si <i>valign. </i></h2></li> <li><h2>1. Align (orizontal)- right- left- center </h2></li> <li><h2>2.Valigh (vertical) - top- bottom - center </h2></li> <li><h2><b>Folosirea imaginilor ca link </b></h2></li> <li><h2> </h2></li> <li><h2><img src="../img/image.jpg"> </h2></li> <li><h2></h2></li> <li><h2></h2></li> </ul>
<br /><center><img src="img18.jpg" alt=""></center>
<br /><h2>Exemplu:</h2> <ul><li><h2>Exemplu:</h2></li> <li><h2>
<br />Acesta este primul paragraf ...
<br />
<br /><img src="../img/image.jpg" align="left"> Acesta este cel de al doilea paragraf...
<p>Acesta este cel de al treilea paragraf...</p>
<br /></h2></li> </ul>
<br /><center><img src="img19.jpg" alt=""></center>
<br /><h2>Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag se gasesc alte doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). </h2> <ul><li><h2>Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag se gasesc alte doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). </h2></li> <li><h2><b> <table border="5"></b></h2></li> <li><h2><b> <tr></b></h2></li> <li><h2><b> <td>un text</td></b></h2></li> <li><h2><b> <td> <a href="/string1strin-text1-text2.html">alt text</a></td></b></h2></li> <li><h2><b> </tr></b></h2></li> <li><h2><b> <tr></b></h2></li> <li><h2><b> <td>text pe randul 2</b></h2></li> <li><h2><b> </td></b></h2></li> <li><h2><b> <td>alt text pe randul 2</b></h2></li> <li><h2><b> </td></b></h2></li> <li><h2><b> </tr></b></h2></li> <li><h2><b> </table></b></h2></li> </ul>
<br /><center><img src="img20.jpg" alt=""></center>
<br /><h2><b>Border-</b>defineste grosimea liniilor care inconjoara tabelul</h2> <ul><li><h2><b>Border-</b>defineste grosimea liniilor care inconjoara tabelul</h2></li> <li><h2><b>Width-</b>latimea tabelului-poate fi data in procent fata de latimea ferestrei browserului width=“50%” sau in pixeli width=“500”</h2></li> <li><h2><b>Height</b>-inaltimea tabelului</h2></li> <li><h2><b>Align</b>-l<b>eft,right,center</b></h2></li> <li><h2><b>Valign</b>-pozitia verticala a textului in <b>celula-top, middle, bottom,baseline</b></h2></li> <li><h2><b>Rules-</b> modul in care vor fi trasate liniile care separa celulele tabelului-<b>none, rows,cols,all</b></h2></li> <li><h2><b>Bgcolor-</b>culoarea de fond comuna tuturor celulelor</h2></li> <li><h2><b>Border color-</b>culoarea liniilor</h2></li> </ul>
<br /><center><img src="img21.jpg" alt=""></center>
<br /><h2>Color Hexa</h2> <ul><li><h2>Color Hexa</h2></li> <li><h2> aqua #00FFFF green #008000 navy #000080 silver #C0C0C0 </h2></li> <li><h2>black #000000 gray #808080 olive #808000 teal #008080 </h2></li> <li><h2>blue #0000FF lime #00FF00 purple #800080 white #FFFFFF</h2></li> <li><h2> fuchsia #FF00FF maroon #800000 red #FF0000 yellow #FFFF00</h2></li> </ul>
<br /><center><img src="img22.jpg" alt=""></center>
<br /><h2><b>Link-uri text.</b>Pentru a seta inceputul si sfarsitul <a href="/observaii-asupra-instrumentalului-camelia-usurelu.html">unei ancore se poate folosi </a><a>. </h2> <ul><li><h2><b>Link-uri text.</b>Pentru a seta inceputul si sfarsitul unei ancore se poate folosi <a>. </h2></li> <li><h2>Zizix Tutoriale </h2></li> <li><h2><b>Target-uri de link-</b>Atributul target spune browser-ului daca trebuie sa deschida noua pagina intr-o noua fereastra sau in aceeasi fereastra.</h2></li> <li><h2>target=" _blank" Deschide o noua fereastra</h2></li> <li><h2> _self" Deschide pagina in aceeasi fereastra</h2></li> <li><h2> _parent" Deschide noua pagina intr-un frame superior linkului </h2></li> <li><h2> _top" deschide noua pagina in acelasi browser anuland toate frame-urile</h2></li> </ul>
<br /><center><img src="img23.jpg" alt=""></center>
<br /><h2>http://www.ls-infomat.ro/index.html><img src=“ls.bmp”></h2> <ul><li><h2>http://www.ls-infomat.ro/index.html><img src=“ls.bmp”></h2></li> <li><h2><b>Link-uri <a href="/durak-online-free-coins.html">de download</a></b></h2></li> <li><h2></h2></li> <li><h2>Text Document</h2></li> <li><h2><b>Link-uri de e-mail</b></h2></li> <li><h2>Nelamuriri aici </h2></li> </ul>
<br /><center><img src="img24.jpg" alt=""></center> </a></a></td></tr></table></td></tr></table></body></body></body></body></body></body>
