PAGINI WEB - LIMBAJUL HTML -

PAGINI WEB- LIMBAJUL HTML -

1.Internet. Termeni şi concepte

a)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).b)Pagină Web – fişier (document) aparţinând WWW. O pagină poate conţine text, imagini, sunete, secvenţe animate şi filme.c)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ă.d)Server Web – calculator care memorează pagini Web şi le pune la dispoziţia utilizatorilor reţelei.e)Hypertext Markup Language (HTML) – este un limbaj cu ajutorul căruia se scriu pagini pentru Wold Wide Web. f)Referinţe (hyperlinks) – şiruri de caractere sau imagini a căror selectare provoacă afişarea unei alte pagini.

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.

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

h) ISP (Internet Service Provider) – firmă care oferă servicii de acces la Interneti) Program de navigaţie (Web browser) – aplicaţie destinată afişării paginilor web (Internet Explorer, Opera, Netscape Navigator)

http://www.edu.ro/preuniv





2. Aplicaţii necesare proiectării unei pagini Webun editor de text ( Notepad ) – în care se editează textul sursă al paginii Webun browser ( Internet Explorer ) – în care se vizualizează pagina Web

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 >.

3. Descrierea limbajului HTML

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-ului că informaţia încadrată între ele este scrisă în limbajul HTML.

Antetul (heading) – conţine informaţii pentru identificarea paginii şi este delimitat de marcajele pereche < HEAD > şi </ HEAD>. Antetul conţine titlul paginii web, care va apărea în partea superioară a ferestrei browser-ului. Titlul paginii este delimitat de marcajele pereche < TITLE > şi < /TITLE>.

Corpul paginii (body) – conţine informaţiile care vor fi afişate şi este delimitat de marcajele <BODY > şi < /BODY>.

APLICAŢIE

< HTML > < HEAD > <TITLE>Pagina mea</ TITLE> </ HEAD><BODY>

Prima pagina WEB!Acesta este un exemplu perfect pentru simplitatea creării unei

pagini Web!</ BODY>

</ HTML>

1. Editaţi în Notepad textul de mai jos:

2. Salvaţi fisierul sub numele : fisa1_numele_clasa.html

3. Deschideţi fişierul în browserul Internet Explorer

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.jpgObs: 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.

6. Caractere specialeCaracter Codspaţiu semnul de copyright &copy < <> > & &” "+ +/ /î îâ âă ãş şŞ Şţ ţŢ Ţ

APLICAŢIE1. 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.

3. Introduceţi coduri pentru caracterele speciale.

4. Salvaţi fiţierul sub numele: fisa2.html

1. 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.

3. Introduceţi coduri pentru caracterele speciale.


Un document HTML este un fişier care conţine text şi coduri de control numite marcaje (tags).

Marcajele 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.

<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ă.

1. Creati o pagina Web cu titlul „Marcaje uzuale” care sa conţină:

Bine ai venit să-l vezi pe GOGUTZA!

(00) \/| |\/

_| |_

2. Textul să fie scris cu caractere de culoare galbenă pe fond verde.

3. Introduceţi în pagină cinci linii orizontale de culori, lungimi şi grosimi diferite.


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

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:

 se foloseste pentru scrierea cu caractere ingrosate (Bold).

 se folooseste pentru scrierea cu caractere inclinate (Italics).

 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.

 se foloseste pentru scrierea indicilor inferiori.

 se foloseste pentru scrierea indicilor superiori.

<STRIKE> este folosit pentru scriere unui text "taiat" cu o linie orizontala.

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: 

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:



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.

Exista cateva stiluri predefinite de punere in evidenta a unui text:

 - pentru evidentiere puternica

 - 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.

Aplicaţie 2 – Marcajul FONT<html> <head> <title>Folosirea elementului FONT</title><head> <body> 101 DALMATIANI Dr.Pavlov era un extraordinar psihanalist. Daduse dovada de mare maiestrie in schimbarea comportamentului animalelor, reusind chiar sa imprieteneasca o vulpe cu o gasca. Cea mai mare realizare a lui a fost insa schimbarea comportamentului nesuferitei Cruella de Vil. Dupa trei ani de inchisoare , pentru ca furase pui de dalmatian, a vindecat-o pe Cruella de dorinta ei nesabuita de a avea haina din blanite de dalmatieni. </body> </html>

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.

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 

imagine text

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>

imaginetext

imagine

text

text

VSPACE

HSPACE

Ferestre (cadre) in HTML

Date post:	30-Dec-2015
Category:	Documents
Upload:	kailani-james
View:	603 times
Download:	58 times

PAGINI WEB - LIMBAJUL HTML -

Documents