O pagina simpla

<html> <head>

<title> Curs de HTML - Lectia 1 </title> </head> <body> <p> Aceasta este o pagina simpla scrisa in HTML </p> </body> </html> In exemplu de mai sus am prezentat principalele elemente (tags) care trebuiesc folosite atunci cand se scrie o pagina ce urmeaza sa fie publicata pe Web. Textul inscris intre cele doua linii orizontale de mai sus, incepe cu tag-ul <html> si se incheie cu perechea sa </html>. El reprezinta un exemplu de cum poate fi scrisa o pagina Web simpla in HTML. Pentru inceput, folositi in scrierea textului HTML de mai sus un text editor obisnuit: Notepad, Word, etc. Dupa transcrierea identica a textului cuprins intre cele doua linii orizontale, salvati textul ( Save file) ca lectia01.html (in format ASCII), apoi deschideti pagina ( Open file) lectia01.html in browserul dumneavoastra Netscape sau Microsoft Internet Explorer. Ordinea de scriere a textului HTML este cea aratata in exemplul de mai sus: 1. <html> Acesta este elementul principal prin care browserul (Netscape de exemplu) recunoaste si citeste o pagina Web. Acest tag se inchide la sfarsitul fisierului, asa cum este indicat la punctul 7. 2. <head> In cadrul acestui tag se inscrie tag-ul <title>, ca mai jos. 3. <title> Aici se precizeaza titlul paginii. </title> 4. </head> Inchiderea tag-ului de la punctul 2. 5. <body> Cuprinsul propriu-zis al paginii Web. In aceasta sectiune a paginii veti folosi marea majoritate a textelor HTML din lectiile ce urmeaza.

. defineste in pagina continutul unui paragraf. simplu spus un text asemanator celui scris la o masina de scris. </html> Inchiderea tag-ului de la punctul 1. HTML Wizard.6. dar este util in intelegerea mai usoara a fisierului HTML. Respectarea acestei reguli va va da satisfactia publicarii pe Web din prima incercare. Deasemeni puteti folosi un convertor (de exemplu Microsoft Internet Assistent for MS Word). (Nu uitati semnul / . tag-ul paragraf se scrie astfel: <p> continutul paragrafului respectiv </p> unde <p> este open tag.) si adaugarea semnelor de reprezentare a asa-numitelor tag-uri HTML.program care adauga automat tagurile potrivite in cuprinsul textului HTML in functie de comanda care defineste tag-ul respectiv in document. De aceea. Exista diferite cai de realizare a unui document HTML: • • • Utilizarea unui editor de text (Notepad. etc. recomand acest stil de lucru. Reamintim ca aceste tag-uri se scriu intre doua paranteze unghiulare: se incepe cu o paranteza unghiulara deschisa < apoi se scrie tag-ul respectiv si se sfarseste cu o paranteza unghiulara inchisa > De exemplu: <p> denumit si tag-ul paragraf. De remarcat modul in care s-a formatat alinierea etichetelor (tag-urilor). </body> Inchiderea tag-ului de la punctul 5. respectiv un program cu ajutorul caruia se poate prelua un document scris intr-un format (un document. Este important sa retineti ca majoritatea tag . etc. denumit close tag.doc file scris in Microsoft Word. cu care se incheie orice pagina Web. fara nici o eroare. vom avea de inceput. In exemplu de mai sus. Dupa un open tag nu uitati sa incheiati cu un close tag.slash !) O alta metoda este scrierea cu ajutorul unui program denumit HTML editor (de exemplu: Front Page 98. Cum se scrie un HTML document ? Documentele HTML sunt scrise in "plain text" (ASCII). ATENTIE Nu schimbati ordinea tag-urilor.) . de exemplu) si apoi transformat (convertit) in HTML format. Word. 7. denumit open tag si de sfarsit. iar </p> este close tag.urilor sunt perechi. Acest lucru nu este obligatoriu (formatul HTML este liber). Astfel. dupa inscrierea continutului paginii Web.

tabele. Cele mai noi sisteme pot intelege files extensii de patru caractere.htm (de exemplu mypage. O pagina internet trebuie sa cuprinda minimum urmatoarele sectiuni: <html> <head><title>My Web Page</title></head> <body> Aici urmeaza continutul documentului HTML . Oricum. Tag-ul <title> care contine titlul documentului..html sau . TAB. etc. in coltul din stanga sus. InfoSeek.html dar. respectiv . mai exista inca PC-uri care folosesc DOS si Windows 3. Primul pas este de a crea un file care sa contina documentul dumneavoastra HTML ce urmeaza sa apara pe Web.) de pe Internet. deja instalat pe computerul dumneavoastra.htm in asa fel incat sa fie acceptata de sistemul respectiv. asemenea procedeului de trimitere si primire a unui email. Aceasta este sectiunea despre care ne vom ocupa cel mai mult in lectiile care urmeaza. prin intermediul serverului respectiv. </body> </html> Organizarea documentelor HTML in sectiunea <head> si sectiunea <body> este foarte importanta pentru protocolul HTTP utilizat in transmiterea informatiilor pe internet. se recomanda sa folositi metoda cea mai simpla de a invata scrierea HTML: un program de tip text editor (Notepad de exemplu). Includerea titlului in sectiunea <head> face ca documentul sa fie mai usor de regasit de catre diferitele programe de cautare (AltaVista. pentru transferul pe internet sunt acceptate ambele extensii: atat . . asa cum este scris acum in programul editor de text Notepad. Yahoo.Pentru inceput. imagini. care poate fi structurat (paginat) in paragrafe.htm). sau Enter la capatul randului.htm .html sau mypage. Acest text. si trebuie sa fie cat mai scurt: maximum 5-6 cuvinte. trebuie sa fie inclus in interiorul tag-ului <head> asa cum este aratat mai sus. Sectiunea <body> este cea care include continutul documentului...html cat si . Folosirea tag-ului Paragraph: <p> </p> Sa pornim de la ideea ca nu stiti nimic despre folosirea tag-urilor si veti incepe sa scrieti un text in modul cunoscut dumneavoastra. liste. Acest protocol include o comanda head care atunci cand intalneste un document cu aceasta informatie (din sectiunea <head>) o retransmite mai departe. celui care o solicita. etc. Acest titlu va fi redat de browser intr-o zona speciala a ecranului. In acest caz denumirea documentului va trebui sa fie de genul mypage. Acest file trebuie sa prezinte extensia .1 si care nu pot intelege decat files cu extensii de maxim trei caractere. chiar daca am folosi spatii albe intre randuri. va fi redat pe toata latimea ecranului fara o aranjare in pagina.

Acesta este un paragraf cu atributul align=left. *** Tag-ul paragraph situeaza de obicei textul intr-un paragraf incepand din partea stanga a paginii respective. separat printr-un rand alb de blocul de text precedent. textul va fi redat asa cum il vedeti.</p> <p align=right> Acesta este un paragraf cu atributul align=right. ignorand carriage return . care este atributul standard (default). blank line.Browser-ul ignora toate aceste comenzi care nu-i sunt cunoscute. blank line. Cele doua paragrafe vor fi redate de catre browser (Netscape. Iata de ce consideram important sa incepem studiul HTML incepand cu folosirea tag-ului paragraph: <p> <p>Asa cum am aratat mai sus. Acesta este un paragraf cu atributul align=right. ca includera tag-ului paragraph atrage dupa sine. astfel: <p align=center> Acesta este un paragraf cu atributul align=center. ignorand carriage return . </p> <p>Daca textul contine tag-ul paragraph asa cum este cazul in acest paragraf. MI Explorer) astfel: Asa cum am aratat mai sus. tab . adaugarea unui spatiu de un rand intre textul precedent si paragraful respectiv. MI Explorer) astfel: Acesta este un paragraf cu atributul align=center. tab .</p> Cele trei paragrafe incluzand atributele respective vor fi redate de catre browser (Netscape. HTML aranjeaza automat textul scris pe toata latimea ecranului.</p> <p align=left> Acesta este un paragraf cu atributul align=left. HTML aranjeaza automat textul scris pe toata latimea ecranului. textul va fi redat asa cum il vedeti. care este standard (default). Daca textul contine tag-ul paragraph asa cum este cazul in acest paragraf. de la inceput pana la sfarsit. etc. Retineti deci. Totusi se poate defini cu ajutorul atributului ALIGN pozitia inceperii paragrafului la stanga. automat. Textul va fi redat intrun lung paragraf. la centru sau la dreapta. Folosirea tag-ului Line Break : <br> . etc. separat printr-un rand alb.

sau sa desenati anumite coduri cu ajutorul caracterelor ASCII (American Standard Code for Information Interchange). inseamna continuarea redarii textului urmator ca un text preformat. incheiati cu closed tag adaugand semnul de eticheta </pre> IMPORTANT: Nu inserati alte tag-uri in cadrul tag-ului preformatted text pentru a nu deteriora calitatea paginii.Sfarsitul unui rand se poate determina prin adaugarea tag-ului <br> imediat dupa ultimul cuvant din randul respectiv. De exemplu vreti ca spatiile libere. Sau doriti ca anumite date sa fie prezentate in coloane. Singurul tag admis a fi inserat intre open tag <pre> si close tag </pre> este tag-ul de links <a> despre care vom vorbi in lectiile urmatoare. Bineinteles. sau lungimea randului sa fie redate asa cum le scrieti. tag-ul line break <br> nu adauga un rand alb. de exemplu). intr-o anumita pozitie pe pagina. Un Al Al Si exemplu de folosire a tag-ului Line Break <br> doilea rand<br> treilea rand<br> asa mai departe .. folosind a fixed-width font. In toate aceste cazuri. dupa scrierea textului... Folosirea tag-ului Preformatted Text: <pre> </pre> Sunt situatii in care nu doriti ca web browser-ul sa schimbe aranjarea in pagina a textului dumneavoastra. Spre deosebire de tag-ul paragraph. puteti folosi tag-ul preformatted text <pre> care determina browser-ul sa reproduca textul identic. FOARTE IMPORTANT: Nu omiteti caracterul slash (/)! Omiterea acestuia.<br> Textul va fi redat de browser astfel: Un exemplu de folosire a tag-ului Line Break Al doilea rand Al treilea rand Si asa mai departe . exact asa cum l-ati tiparit: cu caracterele tastaturii folosite de computerul dumneavoastra. De retinut ca acest tag este nepereche (singular) si deci nu este necesara inchiderea lui ca in cazul tagului paragraph. ceea ce nu este de fapt intentia dumneavoastra ! Iata un exemplu de folosire a tag-ului preformatted text <pre>: <pre>Asa se scrie un text preformat prin care putem reda exact .. ci pur si simplu intrerupe randul in pozitia unde este inscris semnul <br> si forteaza continuarea textului cu un nou rand de la capat (asemanator cu efectul butonului Enter intr-un text obisnuit din Word Processor.

. pana la <h6> cel mai mic. IMPORTANT: Nu confundati tag-ul <titlu> folosit in cadrul sectiunii <head> din pagina HTML cu titlul unui capitol din continutul documentului dumneavoastra. am folosit la fiecare subcapitol al lectiei un titlu (heading) care defineste pe scurt continutul subcaptitolului respectiv. Tag-ul heading defineste pur si simplu un titlu de document si poate fi reprezentat prin 6 nivele de dimensiune a caracterelor. urmand apoi in ordine descrescanda celelalte nivele.pozitia jucatorilor pe terenul de fotbal! PORTAR Fundas stanga Fundas centru Mijlocas Fundas centru Fundas dreapta Mijlocas Inaintas Extrema stanga Extrema dreapta Varf de atac</pre> Textul va fi redat de browser in felul urmator: Asa se scrie un text preformat prin care putem reda exact pozitia jucatorilor pe terenul de fotbal! PORTAR Fundas stanga Fundas centru Mijlocas Fundas centru Fundas dreapta Mijlocas Inaintas Extrema stanga Extrema dreapta Varf de atac Folosirea tag-ului Heading: <h1> through <h6> Asa cum poate ati observat. Desigur ca puteti alege pentru redarea titlului unui capitol din documentul respectiv oricare din cele sase tag-uri: de la <h1> cel mai mare. pana la nivelul cel mai mic <h6>. Primul nivel <h1> este cel mai mare si este redat de catre browser ca un text de dimensiune maxima.

cu formatul cel mai mare Titlul de nivel 2. cu formatul cel mai mare</h1> <h2>Titlul de nivel 2. folosit aici la titlul acestui subcapitol Titlul de nivel 4. care este standard (default). cu formatul cel mai mic *** Ca si in cazul tag-ului paragraph. folosit aici la titlul acestui subcapitol</h3> <h4>Titlul de nivel 4. cu format mic</h5> <h6>Titlul de nivel 6. folosit la titlul acestei lectii</h2> <h3>Titlul de nivel 3. cu format mic Titlul de nivel 6. </h3> Acest titlu (heading) incluzand atributele respective vor fi redate de catre browser (Netscape. cu format de marime mijlocie</h4> <h5>Titlul de nivel 5. MI Explorer) astfel: .FOARTE IMPORTANT : Nu uitati sa inchideti tag-ul dupa scrierea titlului respectiv ! Iata cate un exemplu de scriere HTML pentru fiecare din cele 6 nivele.</h3> <h3 align=right> Titlu (heading) cu atributul align=right. cu formatul cel mai mic</h6> Textul va fi redat de browser astfel: Titlul de nivel 1. de la cel mai mare pana la cel mai mic titlu: <h1>Titlul de nivel 1. folosit la titlul acestei lectii Titlul de nivel 3. cu format de marime mijlocie Titlul de nivel 5. tag-ul heading se poate defini cu ajutorul atributului ALIGN stabilindu-se astfel pozitia in pagina a titlului respectiv.</h3> <h3 align=left> Titlu (heading) cu atributul align=left. Exemplu: <h3 align=center> Titlu (heading) cu atributul align=center.

Titlu (heading) cu atributul align=center. Titlu (heading) cu atributul align=left. Titlu (heading) cu atributul align=right. . care este standard (default).

Sign up to vote on this title
UsefulNot useful