SUPORT 02 CLS9 TIC CAP05 Crearea Paginilor Web

1.
HTML Prezentare general o HTML (Hypertext Markup Language) este un limbaj de marcare utilizat pentru crearea paginilor web care pot fi afiate ntr-un browser. Acest limbaj pune accentul pe organizarea exterioar a textului : Hipertextul este un text obinuit nzestrat cu caracteristici externe : formatarea, imaginile, hiperlegturile; Marcarea procesul prin care un text obinuit este mbogit cu simboluri (comenzi ctre browser pentru reprezentarea textului). o Un document HTML cuprinde : Indicaii de redare formatri ale textului (cuvant subliniat, ngroat), inserarea de imagini, formulare; Metadate informaii despre titlul i autorul documentului o Standardul oficial HTML este World Wide Web Consortium (W3C). o HTML-ul are dou caracteristici eseniale : Hipertextul care ofer posibilitatea de a crea n pagina web o legtur care s duc vizitatorul la orice alt pagin web, astfel nct informaia s poat fi accesat nr-o manier neliniar, mai apropiat de creierul uman i mai puin ca o surs de date statistic, cum ar fi o carte; Universalitatea deoarece documentele HTML sunt salvate ca fiiere text, practic orice calculator poate citi o pagin web indiferent de sistemul de operare. o Un document HTML se poate realiza n dou moduri: manual utiliznd un editor de texte (NotePad); cu ajutorul editoarelor HTML aplicaii software pentru crearea paginilor web de tipul (WYSIWYG).
2. HTML Elemente de baz Structura unui document HTML : <html> inceputul document <head> inceput antet <title>Titlul</title> titlu </head> sfarsit antet <body> inceput corp document . </body> sfarsit corp document </html> sfarsit document Etichete (marcatori, TAG-uri) HTML. O eticheta incepe cu caracterul < si se termina cu caracterul >. (exp:<html>, <head>, <body>, <p>) In general un element HTML este format dintr-un tag de inceput si unul de sfarsit, care contine si caracterul /. (exp:</html>, </head>, </body>. Exista si exceptii, care nu necesita tag de sfarsit : <br>). Un element poate avea unul sau mai multe atribute reprezentate sub forma de perechi nume=valoare. <tag> . </tag> sau <tag atribut1=valoare1 atribut2=valoare2> . </tag> Obs.: elementele HTML se pot imbrica, inchiderea facandu-se in ordinea inversa deschiderii acestora.
Brebenel George Colegiul Tehnic Iuliu Maniu - 2009
Pagina 1
A. Elemente de tip antet (header) sunt inserate in sectiunea antet (<head></head>). <title></title> - defineste titlul documentului afisat de browser in bara de titlul a ferestrei. Acesta nu contine alte elemente. <base> - specifica un URL de baza pentru toate referintele si hiperlegaturile din document. Trebuie dispus inaintea oricarui element ce poate referi o resursa externa. (exp:<base href=http://www.cls12a.org/>) <link> - specifica legaturi catre alte documente si are doua atribute : - rel descrie legaturile anterior si urmator (previous, next); - type specifica tipul legaturii URL (text/css, text/javascript, image/gif); <meta> - acest element poate fi folosit pentru a specifica autorul, data publicarii, descrierea paginii, cuvinte cheie. - content este singurul atribut obligatoriu (exp.:content=HTML, XHTML, CSS); - name cu una din valorile author, description, keywords, revised specifica autorul, descrierea, cuvintele cheie si data ultimei revizuiri; - http-equiv=refresh specifica la cate secunde se reinnoieste pagina. Obs.: metadata este o informatie care nu se afiseaza. B. Elemente de tip body (corpul paginii) sunt inserate in corpul paginii (<body></body>). 1. Formatari pentru evidentierea textului se folosesc efectele de formatare specifice editoarelor de texte. Tipuri de text <b> text ingrosat; <u> text isubliniat; <i> text inclinat; <big> text marit; <small> text micsorat; <sub> text subscript; <sup> text superscript; <font> defineste fontul textului; <br> defineste o noua linie; Pentru a defini tipul fontului, marimea si culoarea textului se folosesc atributele: - atributul face defineste numele fontului; - atributul size defineste marimea fontului; - atributul color defineste culoarea fontului; Exp: <font face=arial size=10 color=red>Text</font> Tipuri de fundal - colorat exp: <body bgcolor=blue></body> - imagine exp: <body background=fundal.jpg></body> Exp.: <html> <head> <title>Format text</title> </head> <body background=img\avion.jpg> <b>Text ingrosat</b><br><u>Text subliniat</u><br> <i>Text inclinat</i><br><big>Mare</big><small>mic</small><br> <font face=arial size=+2 color=red>I am flying!</font> </body> </html> 2. Elemente de bloc
Brebenel George Colegiul Tehnic Iuliu Maniu - 2009 Pagina 2
<p></p> - creeaza un paragraf. Tagul de sfarsit nu este obligatoriu. - atributul align poate lua valorile : left, right, center, justify. <blockquote></ blockquote > - introduce un citat, si este folosit cand citatul contine elemente de bloc (exp.citarea mai multor paragrafe). - atributul citespecifica sursa si trebuie sa fie un URL de tip linie. <hr/> - insereaza o linie orizontala Exp.: <html> <head> <title>Elemente de bloc</title> </head> <body> Inaintea citatului<hr/> <blockquote> Acesta este un citat.<p>Acesta este un nou citat</p> </blockquote> <hr/>Dupa citat </body> </html> 3. Elemente de heading definesc titluri de sectiuni la niveluri diferite <h1></h1> - cel mai mare titlu; <h6></h6> - cel mai mic titlu. <pre></pre> - defineste un text preformatat Exp.: <html> <head> <title>Elemente heading</title> </head> <body> <h1 align=center>Baschet</h1> <h2 align=right>Fotbal</h2> <h3>Volei</h3> <h4>Handbal</h4> <h5>Tenis</h5> <h6>Inot</h6> </body> </html> 4. Elemente de tip linie nu se plaseaza direct in interiorul elementului body, ci se incadreaza in intregime in interiorul elementelor de bloc. Elemente generale <em></em> (emphasis) text inclinat; <strong></strong> (strong emphasis) text ingrosat; <q></q> (quotation) citat; <sub></sub> sau <sup></sup> creeaza text superscript sau subscript; <del></del> (striketrough) text taiat; <ins></ins> (striketrough) text inserat (se afiseaza subliniat); Exp.: <html> <head> <title>Elemente generale</title>
</head> <body> <p>Un cuvant <em>evidentiat</em> <br> <p>Un cuvant <strong>puternic evidentiat!</strong> <br> <q>Citat scurt</q> <br> <dfn>Definitie</dfn> <br> H<sub>2</sub>O <br> O duzina este <del>20</del><ins>12</ins> piese! </body> </html> Elemente pentru documentarea codului <code></code> codul sursa; <samp></samp> rezultatul executiei codului; <kbd></kbd> textul introdus de la tastatura; <var></var> variabilele. Exp.: <html> <head> <title>Elemente de cod</title> </head> <body> <code>Cod sursa</code> <br> <samp>Output cod</samp> <br> <kbd>Cod sursa</kbd> <br> <var>Cod sursa</var> </body> </html> Legaturi sau ancore <a></a> se folosesc pentru a crea legaturi cu alte documente sau pagini web - atributul href specifica legatura sau referinta; - atributul title defineste numele legaturii asa cum apare in browser cand trecem cu mousul peste legatura; - atributul rel stabileste relatia dintre documentul curent si legatura URL : next, previous, index, start. Exp.: <html> <head> <title>Ancore</title> </head> <body> <p>Legatura catre clasa XII-A: <a href=http://www.cls12a.org title=Pagina clasei XII-a A>XII A</a> </p> <p>Legatura care se deschide intr-o pagina noua: <a href=http://www.cls12a.org title=Pagina clasei XII-A target=_blank>XII A</a> </p>
<p>Legatura catre<b>elemente de bloc</b>: <a href=bloc.html title=Elemente de bloc >Elemente de bloc</a> </p> </body> </html> Imagini si obiecte <img> acest element descrie o imagine; nu are tag de sfarsit - atributul src include o imagine; - atributul alt dispune un text alternativ in cazul in care imaginea nu poate fi incarcata; - atributul title pentru mouse-over coments; - atributul align pentru alinierea in cadrul randului. <object></object> include un obiect al carui tip este specificat cu ajutorul atributului type; <param></ param> sau < param/> poate fi dispus numai in cadrul unui element object, folosind atributele name si value. <span></span> se foloseste pentru a grupa elementele din aceeasi linie, putandu-se aplica formatari in cadrul grupului de elemente Exp.: <html> <head> <title>Imagine si span</title> </head> <body> <p>O imagine <img src=img/music.jpg alt=Do not Disturb align=bottom width=40 height=32/>in text </p> <p>Acesta este un paragraf <span style=color:#0000FF;>Acesta este un paragraf</span>Acesta este un paragraf</p> </body> </html>
Brebenel George Colegiul Tehnic Iuliu Maniu - 2009
Pagina 5

SUPORT 02 CLS9 TIC CAP05 Crearea Paginilor Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

SUPORT 02 CLS9 TIC CAP05 Crearea Paginilor Web

Încărcat de

Drepturi de autor:

Formate disponibile

1.

Brebenel George Colegiul Tehnic Iuliu Maniu - 2009

Brebenel George Colegiul Tehnic Iuliu Maniu - 2009

S-ar putea să vă placă și