Proiect tic a_1b_dumitru_alina

1

Colegiul Economic Mangalia/Liceul Tehnologic Ion Bănescu Mangalia

Tehnologia informaţiilor şi comunicaţiilor

Crearea paginilor web

Prof. Dumitru Alina

2

Cuprins

1. Introducere .......................................................................................................................................... 3

2. Structura unui document HTML ........................................................................................................... 4

3. Atribute ............................................................................................................................................... 5

4. Recapitulare ....................................................................................................................................... 11

5. Bibliografie: ........................................................................................................................................ 12

3

1. Introducere

Disciplina „Tehnologia informaţiei şi a comunicaţiilor”, din cadrul ariei curriculare „Tehnologii”, trebuie să asigure dobândirea unor cunoştinţe de utilizare a calculatorului si a programelor, de tehnologia informaţiei şi comunicării la nivel de cultură generală, necesare unor activităţi cu caracter aplicativ utile în mediul în care îşi vor desfăşura activitatea.

Pornind de la faptul că nu există domeniu de activitate unde să nu se prelucreze şi să nu se transmită informaţii atât în cadrul domeniului respectiv cât şi spre exteriorul lui, afirmăm că azi informaţia este foarte

preţioasă, ea trebuie stocată, prelucrată şi transmisă în condiţii care asigură corectitudine şi exactitate, deci la nivel profesional.

Tehnologia informaţiei, prin specificul ei, este esenţial legată de lucrul individual pe un calculator, deci dezvoltă deprinderea de a lucra individual.

Pe de altă parte, prin intermediul reţelelor de calculatoare este posibil schimbul de informaţii între mai mulţi utilizatori de calculatoare mult mai eficient decât prin orice altă metodă clasică.

O pagină web este o resursă aflată în spațiul web (WWW) din Internet, de obicei în format HTML sau

XHTML (extensia numelui fișierului fiind de cele mai multe ori .html sau .htm) și având hiperlinkuri (hiperlegături) pentru navigarea simplă (cu un singur clic de maus) de la o pagină sau secțiune de pagină la alta. Pagina web se numește astfel deoarece ea se poate afișa pe un monitor sau ecran de calculator și se aseamănă într-o oarecare măsură cu o pagină de ziar.

O pagină web poate conține:

texte în cele mai diferite formate (forme, mărimi, culori, poziții etc.)

imagini (fișiere cu formatele .gif, .jpeg, .png ș.a.)

audio (fișiere în formatele .mid, .wav ș.a.)

conținut multimedial interactiv care, pentru a fi văzut și utilizat, necesită de obicei un plugin ca de ex. cu formatul Adobe Flash sau Adobe Shockwave

miniaplicații (așa-numite "applets") – subprograme care rulează la chemarea paginii și care

deseori oferă filme, imagini, interacțiune și sunete.

HTML este prescurtarea de la Hypertext Markup Language, ceea ce reprezinta de fapt limbajul pe care

browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web.

La sfârşitul unităţii de învăţare elevii vor fi capabili să: utilizeze editorul de texte Notepad pentru a crea o pagina web; sa insereze si sa formateze un text in pagina; sa insereze o imagine; sa realizeze o legatura cu o alta pagina pe un text sau pe o imagine; sa creeze o pagina web cu tema „Statele lumii ”

http://ro.wikipedia.org/wiki/WWW

http://ro.wikipedia.org/wiki/Internet

http://ro.wikipedia.org/w/index.php?title=Mid&action=edit&redlink=1

http://ro.wikipedia.org/w/index.php?title=Wav&action=edit&redlink=1

http://ro.wikipedia.org/wiki/Plugin

http://ro.wikipedia.org/wiki/Adobe

http://ro.wikipedia.org/wiki/Flash

http://ro.wikipedia.org/w/index.php?title=Shockwave&action=edit&redlink=1

4

2. Structura unui document HTML

Paginile HTML sunt formate din etichete sau tag-uri şi au extensia .html sau .htm. În marea lor

majoritate aceste etichete sunt pereche, una de deschidere <eticheta> şi alta de închidere </eticheta>. Mai

există şi cazuri in care acestea nu se inchid. Atunci se foloseste <eticheta />, iar browserul interpreteaza

aceste etichete afisand rezultatul pe ecran.

Un document HTML se împarte în trei sectiuni:

<html> - Orice document html se incepe cu marcajul html. Acest tag transmite browser-ului ca

documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in care

vor fi interpretate diferite partitii ale fisierului

<head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se afiseaza

in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare ca titlul ferestrei

browser-ului. Marcajul <head> > contine descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi

si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon), etc.

Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile

motoarelor de cautare si au urmatorul format: <META NAME="nume" CONTENT="continut">

<body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in browser

(text, imagini,etc.).

Pentru a crea o pagina HTML simplă trebuie scris codul de mai jos într-un editor de texte (Notepad) şi

apoi salvat într-un fişier cu extensia .html (index.html). Pentru a o afisa, fişierul creat trebuie deschis cu un

browser web (Mozilla Firefox, Internet Explorer).

<html>

<head>

<title> Titlul paginii </title>

</head>

<body>

Buna ziua!

</body>

</html>

5

3. Atribute

Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Dacă un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului

respectiv. Atributele sunt ca o descriere pentru taguri, ele mereu au nume si o valoare. Un atribut se scrie sub

forma: nume=”valoare” si se introduce in tag sub forma <tag nume=”valoare”></tag>. Printre acestea sunt tagurile de aliniere, de formatare a textului, a culorii diferitor elemente, pentru link-uri, etc.

Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem ca fondul paginii noastre sa fie portocaliu.

<html>

<head>

<title> Titlul paginii </title>

</head>

<body bgcolor=" #FF9900 "> Continutul paginii.

<h1 align="center"> Buna ziua!</h1>

</body>

</html>

Textul se poate introduce si fara taguri. Dar daca se doreste un text de o anumita forma atunci acesta se

introduce intre tag-uri ca cele de mai jos. <font>… </font> - intre acestea se introduce textul care se doreste a fi afisat pe pagina (acest tag nu va

schimba deloc forma textului). Acesta are trei atribute optionale: color, face si size. Astfel cu ajutorul lui se

poate specifica culoarea textului, fontul si dimensiunea acestuia. <b>…</b> sau <strong>…</strong> - defineste text ingrosat <big>…</big> - defineste text mare <i>…</i> sau <em>…</em> - defineste text italic <u>...</u> - textul apare subliniat <s>...</s> - textul apare taiat Anteturile sunt folosite in general pentru evidentierea titlurilor (h - headings). In dependenta de numarul

din dreptul numelui marcajului, variaza dimensiunea fontului. HTML adauga automat o linie goala in plus

inainte si dupa un antet. <h1>…</h1> -defineste un antet de cea mai mare marime; <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> -defineste antetul de cea mai mica

marime; Marcajul <p>...</p> specifica un paragraf.

Marcajul <br> inseamna rand nou. Atunci cand se doreste ca o propozitie sa apara in rand nou, va trebui sa se includa acest marcaj(<br> e echivalentul lui "Enter" in Word, de exemplu.) El este nepereche, neavand nevoie de tag de inchidere.

Cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor:

Nume tag Nume atribut

Valoare atribut Detalii

<A> Ancora

href URL Adresa catre care vrem sa fie legatura

target _blank _self _parent

Fereastra in care se va face afisarea

6



_top

<B> Text bold

<BODY> Cuprinsul documentului

background adresa imaginii Imaginea de fond

bgcolor cod culoare nume culoare

Culoarea fondului

leftmargin procent din latimea paginii numar de pixeli

Distanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a paginii

topmargin procent din inaltimea paginii numar de pixeli

Distanta dintre marginea de sus a ferestrei browserului si marginea de sus a paginii

text cod culoare nume culoare

Culoarea textului

alink cod culoare nume culoare

Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor)

link cod culoare nume culoare

Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele)

vlink cod culoare nume culoare

Culoarea legaturilor vizitate (s-a efectuat cel putin un click pe ele)

<BR> Sfarsitul randului

<CENTER> Afisarea in centrul paginii

<FONT> Fontul textului

color cod culoare nume culoare

Culoarea fontului

face nume font Tipul fontului

size un numar de la 1 la 7

Marimea fontului

<FORM> Formular interactiv

action URL Adresa scriptului care prelucreaza datele din cadrul formularului

method GET POST

Metoda de prelucrare a datelor formularului

<FRAME> Cadru (fereastra)

frameborder 1 sau 0 Cadrul are sau nu are chenar

7



marginheight numar de pixeli Spatiu deasupra si sub un cadru

marginwidth numar de pixeli Spatiu la stanga si la dreapta unui cadru

src URL Sursa cadrului

<FRAMESET> Multime de ferestre

cols procent din latimea paginii numar de pixeli

numarul si marimea relativa a coloanelor

rows procent din inaltimea paginii numar de pixeli

numarul si marimea relativa a randurilor

H1, H2, H3, H4, H5, H6

Titluri in cadrul documentului

align left center right justify

Alinierea titlului

<HEAD> Antetul documentului

<HR> Linie orizontala

align left center right

Alinierea orizontala a liniei

color cod culoare nume culoare

Culoarea liniei

size numar de pixeli Inaltimea liniei

width procent din latimea paginii numar de pixeli

Latimea liniei

<HTML> Document HTML

<I> Text italic

<IMG> Adaugarea unei imagini

align left right top middle bottom

Alinierea imaginii in pagina: left (stanga) sau right (dreapta) Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)

8



alt text Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata

border numar de pixeli Marimea chenarului din jurul imaginii

height procent numar de pixeli

Inaltimea imaginii

hspace numar de pixeli Spatiu pe orizontala in jurul imaginii

src URL Adresa imaginii

vspace numar de pixeli Spatiu pe verticala in jurul imaginii

width procent numar de pixeli

Latimea imaginii

<INPUT> Element al formularului

maxlength numar Numar maxim de caractere

name date de tip caracter

Numele elementului formularului

size numar Marimea elementului formularului

src URL Adresa pentru o imagine

type text password checkbox radio submit reset file hidden image button

Tip input

value date de tip caracter

Valoare input

<LI> Element al unei liste

<META> Metainformatii

content text Descrie valoarea atributului name

name author Autor

description Descriere

keywords Cuvinte cheie

<OL> Lista ordonata

9



start numar Cu ce valoare incepe numerotarea

type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1 (implicit)

<P> Paragraf

align left center right justify

Alinierea paragrafului

<SELECT> Lista de selectii

multiple Permite selectia mai multor elemente


Numele listei de selectii

size numar Numarul de elemente ale listei

<STRONG> Text evidentiat

<SUB> Text indice

<SUP> Text exponent

<TABLE> Tabel


Alinierea tabelului

background URL Imaginea de fond pentru tabel


Culoarea fondului pentru tabel

border procent numar de pixeli

Chenarul tabelului

bordercolor cod culoare nume culoare

Culoarea chenarului

cellpadding numar de pixeli Spatiu intre continutul celulelor tabelului si marginile lor

cellspacing numar de pixeli Spatiu intre celulele tabelului

cols numar Numarul de coloane ale unui tabel

hspace numar de pixeli Spatiu pe orizontala in jurul tabelului

vspace numar de pixeli Spatiu pe verticala in jurul tabelului

width procent numar de pixeli

Latimea tabelului

10



<TD> Celula de tabel


Alinierea continutului celulei pe orizontala

background URL Imaginea de fond pentru celula


Culoarea fondului pentru celula

colspan numar Numarul de coloane pe care se intinde celula

height numar de pixeli Inaltimea celulei

rowspan numar Numarul de linii pe care se intinde celula

valign top middle bottom

Alinierea continutului celulei pe verticala

width numar de pixeli Latimea celulei

<TEXTAREA> Camp de editare multilinie

cols numar Numarul de coloane


Numele campului de editare multilinie

rows numar Numarul de randuri

<TITLE> Titlu document

<TR> Rand tabel


Alinierea continutului celulelor pe orizontala


Culoarea fondului pentru tot randul

valign top middle bottom

Alinierea continutului celulelor pe verticala

<U> Text subliniat

<UL> Lista neordonata

type circle disc square

Forma marcajului

11

4. Recapitulare

1. Care sunt etichetele utilizate pentru inserarea titlului paginii:

<body> </body>

<title> </title>

<titlu> </titlu>

2. Pentru a trece la un rând nou se foloseşte eticheta:

<b>

<br>

<i>

3. Atributul utilizat pentru inserarea unei imagini in fundalul paginii este:

bgcolor

background

link

4. Completaţi în spaţiile libere etichetele şi atributele pentru a realiza o pagină cu următoarele

caractesistici:

Titlul paginii: Statele lumii

Culoarea de fundal a paginii este roşu

Pe mijloc să se scrie România îngroşat şi subliniat

<html> _____________ Statele lumii _____________ <body ___________> ________________ Romania ________________ </html>

5. Descoperiţi cele cinci greşeli strecurate în realizarea unei pagini cu următoarele caracteristici:

Titlul paginii: Acasa

Culoarea de fundal a paginii verde

Pe mijloc scris inclinat Romania

3 rânduri libere după titlu

Primul paragraf aliniat la dreapta

<html> <titlu>Acasa </titlu> <body bgcolor=verde> <b>Romania</b> <p align=left> România este o țară situată în sud-estul Europei Centrale, pe cursul inferior al Dunării, la nord de peninsula Balcanică și la țărmul nord-vestic al Mării Negre. </html>

12

5. Bibliografie:

Resurse didactice

1. Teodoru, Gugoiu. HTML prin exemple. Bucuresti: Editura Teora, 2000 2. Daniela Bejan. Limbajul HTML. Bacău: Editura EduSoft, 2006

Resurse on-line si multimedia:

1. http://www.worklance.com/htmltutorial/ceestehtml 2. http://www.ecursuri.ro/cursuri/html-introducere.php 3. http://www.afaceri-online.net/proiectare-site-web/html 4. www.codlea.go.ro 5. www.info-codlea.ro 6. www.fil.unitbuc.ro 7. www.images.google.ro 8. www.3schools.ro 9. www.e-training.iatp.md

http://www.worklance.com/htmltutorial/ceestehtml

http://www.ecursuri.ro/cursuri/html-introducere.php

http://www.afaceri-online.net/proiectare-site-web/html

http://www.codlea.go.ro/

http://www.info-codlea.ro/

http://www.fil.unitbuc.ro/

http://www.images.google.ro/

http://www.3schools.ro/

http://www.e+training.iatp.md/

Proiect tic a_1b_dumitru_alina

Documents

Transcript of Proiect tic a_1b_dumitru_alina