1 / 21

PAGINI WEB - LIMBAJUL HTML -

PAGINI WEB - LIMBAJUL HTML -. 1 . Internet. Termeni şi concepte. World Wide Web (WWW) – parte din Internet constând dintr-un număr foarte mare de documente memorate pe discurile unor calculatoare, accesibile prin Internet folosind un program de navigaţie (browser).

kailani-james
Télécharger la présentation

PAGINI WEB - LIMBAJUL HTML -

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PAGINI WEB- LIMBAJUL HTML -

  2. 1.Internet. Termeni şi concepte • World Wide Web (WWW) – parte din Internet constând dintr-un număr foarte mare de documente memorate pe discurile unor calculatoare, accesibile prin Internet folosind un program de navigaţie (browser). • Pagină Web – fişier (document) aparţinând WWW. O pagină poate conţine text, imagini, sunete, secvenţe animate şi filme. • Site Web– o colecţie de pagini Web întreţinută de o firmă, o instituţie de învăţământ, o agenţie guvernamentală sau de o persoană. • Server Web– calculator care memorează pagini Web şi le pune la dispoziţia utilizatorilor reţelei. • Hypertext Markup Language (HTML) – este un limbaj cu ajutorul căruia se scriu pagini pentru Wold Wide Web. • Referinţe (hyperlinks)– şiruri de caractere sau imagini a căror selectare provoacă afişarea unei alte pagini.

  3. g) URL (Uniform Resource Locator) – fiecare document existent pe Internet are o adresă unică folosită pentru accesarea sa de către programul de navigaţie. Ea se scrie fără spaţii şi este compusă din 3 părţi: protocolul folosit, numele calculatorului gazdă şi cale http://www.edu.ro/preuniv • URL poate folosi diferite protocoale cum ar fi: FTP şi HTTP • FTP (File Transfer Protocol)– este un protocol ce permite schimbul de fişiere între două calculatoare • HTTP (Hipertext Transport Protocol) – este un protocol prin care paginile Web sunt transferate în reţea. • h) ISP (Internet Service Provider) – firmă care oferă servicii de acces la Internet • i) Program de navigaţie (Web browser) – aplicaţie destinată afişării paginilor web (Internet Explorer, Opera, Netscape Navigator)

  4. 2. Aplicaţii necesare proiectării unei pagini Web • un editor de text ( Notepad ) – în care se editează textul sursă al paginii Web • un browser ( Internet Explorer ) – în care se vizualizează pagina Web 3. Descrierea limbajului HTML • HTML – Hypertext Markup Laguage – limbajul în care sunt scrise paginile web. • Un document HTML este un fişier care conţine text şi coduri de control numite marcaje (tags). Marcajele sunt sunt delimitate de caracterele < şi >. Aceste caractere încadrează un text şi specifică browser-ului că textul dintre ele este un cuvânt cheie al limbajului (o comandă care trebuie executată). • Marcajele HTML sunt de două tipuri: • marcaje de sine stătătoare - < cuvânt cheie > • marcaje pereche - <cuvânt cheie >……< /cuvânt cheie >.

  5. 4. Marcaje (TAG-uri) de bază O pagină web standard trebui să conţină obligatoriu următoarele marcaje de bază: • Documentul HTML este delimitat de marcajele pereche < HTML >şi< /HTML> care precizează browser-uluicăinformaţiaîncadratăîntreeleestescrisăînlimbajul HTML. • Antetul (heading) – conţineinformaţiipentruidentificareapaginiişiestedelimitat de marcajelepereche<HEAD> şi </ HEAD>. Antetulconţinetitlulpaginii web, care vaapăreaînparteasuperioară a ferestrei browser-ului. Titlulpaginiiestedelimitat de marcajelepereche < TITLE >şi< /TITLE>. • Corpulpaginii (body) – conţineinformaţiile care vorfiafişateşiestedelimitat de marcajele <BODY >şi< /BODY>.

  6. APLICAŢIE 1. Editaţi în Notepad textul de mai jos: < HTML > < HEAD > <TITLE>Pagina mea</ TITLE> </ HEAD> <BODY> Prima pagina WEB! Acestaeste un exemplu perfect pentrusimplitateacreăriiuneipagini Web! </ BODY> </ HTML> 2. Salvaţi fisierul sub numele : fisa1_numele_clasa.html 3. Deschideţi fişierul în browserul Internet Explorer

  7. 5. Marcaje pentru controlul culorilor În cadrul paginii se pot configura culori diferite pentru text sau pentru fondul paginii. Pentru a specifica culoarea de fond a paginii se adaugă marcajului <BODY> atributul bgcolor = “culoare”. Culoarea poate fi specificată fie în limba engleză fie în cod hexazecimal. Formatul în care se transmite comanda este de tip: RRGGBB (red, green, blue) Ex: <BODY bgcolor=”blue”> sau <BODY bgcolor=”#0000FF”> - fondul paginii este albastru În cazul în care dorim ca pagina să aibă un aspect mai personalizat putem folosi ca fond nu doar o culoare ci o imagine (în format GIF sau JPG) prin adăugarea atributului background =“imagine.jpg” la marcajul <BODY>. Ex: < BODY background =“001.jpg” > - fondul paginii va fi imaginea din fişierul 001.jpg Obs: fişierul care conţine imaginea de fond trebui să fie în acelaşi dosar cu fişierul html. În caz contrar se specifică calea. Pentru a schimba culoarea textului se adaugă la marcajul <BODY> atributul text = “culoare”. Ex: <BODY bgcolor = “yellow” text = “blue” > - caractere albastre pe fond galben.

  8. 6. Caractere speciale

  9. APLICAŢIE Creati o pagina Web cu titlul „Caractere speciale” care sa contina următorul text: 2. Textul să fie scris cu caractere de culoare albă pe fond albastru. Introduceţi coduri pentru caracterele speciale. 4. Salvaţi fiţierul sub numele: fisa2.html Un document HTML este un fişier care conţine text şi coduri de control numite marcaje (tags). Marcajele sunt delimitate de caracterele <şi>. Acestecaractereîncadrează un text şispecifică browser-uluicătextuldintreeleeste un cuvântcheie al limbajului.

  10. <HR > - comanda trasează o linie orizontală de-a lungul paginii (se utilizează pentru a separa diferite secţiuni ale unei pagini web). Acest marcaj poate primi mai multe atribute ce pot configura poziţia, dimensiunea şi grosimea liniei Ex: <HR width=100 size=8 align=”right” color=”green” noshade > - linia va avea lungimea de 100 pixeli, grosimea de 8 pixeli, va fi aliniată la dreapta, culoarea verde; atributul noshade face linia să devină solidă.

  11. Aplicaţie 1. Creati o pagina Web cu titlul „Marcaje uzuale” care sa conţină: Bineai venit să-l vezi pe GOGUTZA! (00) \/| |\/ _| |_ 2. Textul să fie scris cu caractere de culoare galbenă pe fond verde. Introduceţi în pagină cinci linii orizontale de culori, lungimi şi grosimi diferite. 4. Salvaţi fiţierul sub numele: fisa3.html

  12. 8. Marcaje pentru formatarea textului • In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita (citate, nume, etc). Pentru aceasta veti specifica explicit valori pentru unele din atributele ale unui font: • corpul de litera • culoare fontului • stilul fontului • dimensiunea fontului

  13. MARCAJE pentrustilulfontului • Cel mai usor mod de a marca un anumit stil corespunzator unui text in document este de a folosi controalele care modifica stilul fontului dupa cum urmeaza: • <B> • se foloseste pentru scrierea cu caractere ingrosate (Bold). • <I> • se folooseste pentru scrierea cu caractere inclinate (Italics). • <U> • este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat. • <TT> • indica folosirea fontului monospatiu, adica acea forma de scriere in care fiecare caracter ocupa pe latime acelasi spatiu. Acest tip de font este asemanator cu cel utilizat se catre masinile de scris. • <SUB> • se foloseste pentru scrierea indicilor inferiori. • <SUP> • se foloseste pentru scrierea indicilor superiori. • <STRIKE> • este folosit pentru scriere unui text "taiat" cu o linie orizontala.

  14. MARCAJUL <FONT> • Acest marcaj permite specificare atributelor care privesc tipul caracterelor, dimensiunea si culoarea lor. Atributele pe care le avem la indemana sunt: • Face - folosit pentru alegerea corpului de litera utilizat. Valoarea atribuita acestei proprietati trebuie sa fie un nume de font valid. Este recomandabil sa folositi fonturile "clasice" pentru a va asigura ca browserul va recunoaste tipul de font specificat.Exemplu: <FONT Face="Arial"> • Size - folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7. Valoarea imlicita a dimensiunii fontului este, de obicei, 3. • Color - este atributul cu ajutorul caruia se poate stabili culoarea textului marcat. Valorile acestei proprietati se pot scrie fie cu ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui celor 16 culori de baza.Exemplu: • <Font Color = red><Font Color = #ff0000>

  15. Controlul<BASEFONT> • Daca dorim sa alegem un anumit tip de font, o anumita dimensiune sau culoare a fontului care sa fie valabile pe intreg continutul documentului, se va utiliza marcajul BASEFONT. • Exemplu: • <body><basefont color=blue size=5>...</body> • Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea dimensiunea de 5 unitati. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de formatare a textului care impun alte atribute de afisare.

  16. Stilurilogice de formatare a textului Exista cateva stiluri predefinite de punere in evidenta a unui text: <Strong> - pentru evidentiere puternica <Em> - pentru scriere cu caractere italice <Cite>- pentru inserare de citate <Code> - pentru listing de program <Dfn> - pentru definitie de cuvant <Blockquote> - pentru a pune in evidenta un bloc de text. Blocul de textul va fi indentat spre dreapta fata de marginea stanga a elementului care il contine. <Pre> - folosit pentru afisarea textului "preformatat". Textul marcat de etichetele de inceput si sfarsit ale acestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a fost scris in sursa documentului HTML. Astfel, se vor respecta spatiile libere si trecerea la linie noua, dar caracterele vor fi afisate cu font de tip monospatiu.

  17. Aplicaţie 1 – stilul fontului Ecuatia de gradul al II-lea Exercitiu: Fiind data ecuatuia x2 - 3x + 2 = 0 , solutiileacesteifunctiiecuatiisunt:x1 = 1, x2 = 3saux1 = 1, x2 = 2 ? Aplicaţie 2 – Marcajul FONT <html> <head> <title>Folosirea elementului FONT</title><head> <body> 101 DALMATIANI<br> <font face="Arial" size = 4>Dr.Pavlov era un extraordinar psihanalist</font>. Daduse dovada de <font color="#ff0000"> mare maiestrie</font> in schimbarea <font face="Courier" color="#008000">comportamentului animalelor</font>, reusind chiar sa imprieteneasca <font size = 7>o vulpe cu o gasca</font>.<br> Cea mai mare realizare a lui a fost insa <font size = "+1" color="#800000">schimbarea</font> <font size="+2">comportamentului </font><font size="+3">nesuferitei </font> <font size="+4" color="#ff00ff">Cruella de Vil.</font> <br> <font color="#000080">Dupa <font size="-1">trei ani</font> <font size="-2"> de inchisoare </font> </font>, pentru ca furase <font face="Symbol">pui de dalmatian</font>, a vindecat-o pe <font face="System" color="#ff00ff" size="5">Cruella</font> de dorinta ei nesabuita de a avea <font size = +2 color="#00ff00">haina din blanite de dalmatieni.</font> </body> </html>

  18. 9. INSERAREA IMAGINILOR ÎNTR-O PAGINĂ WEB Imaginile introduse în paginile web pot proveni din diferite surse: alte pagini web, scanate sau desenate cu ajutorul unor aplicaţii. Introducerea unei imagini (de tip GIF sau JPG) într-o pagină web se face cu ajutorul marcajului: <IMG SRC =”imagine.jpg”> unde imagine.jpg este fişierul care conţine imaginea iar atributul SRC specifică sursa de unde serverul încarcă imaginea respectivă. Obs: dacă fişierul care conţine imaginea nu se află în dosarul în care se află pagina trebuie specificată calea.

  19. MARCAJE PENTRU FORMATAREA IMAGINILOR 1. Mărimea unei imagini introdusă într-o pagină web se stabileşte prin aributele WIDTH şi HEIGHT. Acestea determină dimensiunea în pixeli a zonei ocupată de imagine. Ex: <img src=”imagine.jpg” width=100 height=100> 2. Încadrarea unei imagini (adăugarea unui cadru) se indică prin adăugarea atributului BORDER=n, n fiind lăţimea cadrului în pixeli. Ex: <img src=”imagine.jpg” border=50> 3. Dispunerea textului în raport cu o imagine se indică prin atributul ALIGN. Acesta poate lua valorile LEFT sau RIGHT Ex. <IMG SRC=”imagine.gif” ALIGN=left> 4. Pentru a intrerupe dispunerea textului – la dreapta figurii se va include cu marcajul <BR CLEAR=left> imagine text

  20. 5. Stabilirea spaţiului dintre imagine si text se stabileşte cu atributele HSPACE (spaţiul orizontal) şi VSPACE (spaţiul vertical) Ex: <IMG SRC=”imagine.gif” HSPACE=50 VSPACE=50> 6. Poziţionarea textului în raport cu imaginea se face folosind atributul ALIGN cu valorile top, bottom şi middle Ex: <IMG SRC=”imagine.gif” ALIGN=bottom> text VSPACE imagine HSPACE text imagine text

  21. Ferestre (cadre) in HTML

More Related