Sunteți pe pagina 1din 15

Platforme media digitale. Note de curs.

Sergiu Corlat, USM

Noiuni generale: 1. Crearea documentelor orice editor de text, preferabil NotePad 2. Salvarea opiunea Save As, cu extensia html, tip: All files 3. Vizualizare:

Structurarea informaiei n documentele HTML este realizat prin secvene de control / taguri, marcate de <>. Secvenele de control marcheaz nceputul i sfritul fragmentului asupra cruia este aplicat o transformare / aciune. Secvena care marcheaz sfritul se deosebete de cea de nceput prin prezena / Documentele ncep cu secvena <HTML>, sfritul este marcat cu </HTML>. Conin dou seciuni: antetul (elemente invizibile, de control) delimitat de secvenele <HEAD> </HEAD> i corpul documentului (seciunea de date) delimitat de secvenele <BODY> </ BODY >

Pentru delimitarea titlurilor se folosesc secvenele <Hx> </Hx>, unde x este o valoare de la 1 la 6. <H1> corespunde titlului de dimensiune maxim, <H6> dimensiunii minime. Textul obinuit este divizat n paragrafe cu secvenele <P> </P>. Suplimentar, textul poate fi aliniat cu ajutorul atributelor align=center | left| right.
<html> <head> <title> Exemplul 1.2</title> <H1 ALIGN=CENTER> Un document HTML putin mai complicat </H1> </head> <body> <H1 ALIGN=CENTER> Salut </H1> <H2> Este un exemplu mai complicat al documentului HTML </H2> <P> Acum noi cunoatem c textul poate fi aliniat nu numai la stinga </P> <P ALIGN=CENTER>dar i pe centru</P> <P ALIGN=RIGHT>sau pe partea dreapta </P> </body> </html>

Evidenieri:

Bold: <B> </B> Subliniat: <U> </U> Indice superior <Sup> </Sup> Typewriter <TT> </TT>

Italic: <I> </I> Tiat: <Strike> </Strike> Indice inferior <Sub> </Sub>

Caracteristici font:

<Font color=nume sau cod culoare> </Font> <Font size=valoare numeric de la 1 la 6> </Font> <Font face=nume font> </Font> Caracteristicile pot fi mbinate: <Font face=Arial Black color=red size=4> </Font>

n cazul utilizrii stilurilor logice autorul documentului nu poate cu siguran spune, ce va apare pe monitorul cititorului. Diferite sisteme browser interpreteaz aceste stiluri n mod diferit. Se poate ntmpla c unele stiluri sunt ignorate i n locul or apare text standard, fr elemente de formatare. Dintre cele mai utilizate stiluri logice vom meniona urmtoarele: <EM> ... </EM> - text accentuat <STRONG> ... </STRONG> - text puternic accentuat <CODE> ... </CODE> - recomandat pentru afiarea fragmentelor surselor documentelor <SAMP> ... </SAMP> - de la sample (eng.) Se recomand pentru demonstrarea comunicrilor afiate de programe. <KBD> ... </KBD> - de la keyboard (eng.) tastatur. Se recomand pentru evidenierea fragmentelor, ce trebuie introduse de la tastatur. <VAR> ... </VAR> - de la variable variabil. Se recomand pentru a scrie numele variabilelor

<HTML> <HEAD> <TITLE>Exemplul 2.3</TITLE> </HEAD> <BODY> <H1>Marcarea i formatarea fragmentelor de text</H1> <P> Acum cunoatem, c fragmentele de text pot fi evideniate <B>semigras</B> , <I>cursiv</I> sau <U> subliniat </U>. De asemenea pot fi introduse fragmente cu caractere de lime fix <TT>(imitarea mainii de dactilografiat)</TT> </P> <P> Mai exist i stiluri logice: </P> <P> <EM> EM de la englezul emphasis - accent </EM> <BR> <STRONG> STRONG de la englezul strong emphasis - accent puternic </STRONG> <BR> <CODE> CODE pentru fragmente de cod </CODE> <BR> <SAMP> SAMP de la englezul sample - exemplu </SAMP> <BR> <KBD> KBD - de la englezul keyboard tastatur </KBD> <BR> <VAR> VAR - de la englezul variable - variabil </VAR> </P> </BODY> </HTML>
Not: <BR> secven pentru ruperea forat a rndului n paragraf.

Not: Pentru pstrarea unei formatri manuale a unui fragment de text se folosete secvena <PRE> </PRE>. Ea face parte din stilurile fizice i e recunoscut de toate aplicaiile de explorare.

Liste cu marcaje:

Delimitarea listei: <UL> </UL> Selectarea tipului de marcaj: atributul TYPE= DISC | CIRCLE | SCUARE Marcarea elementelor listei <LI> </LI> Exemplu, pentru a obine lista:

Matematica; Informatica; Fizica; Chimia.

Not: secvena <LI> poate s nu fie nchis

va fi nevoie de urmtoarea secven HTML:

<UL TYPE=SQUARE> <LI> Matematica; <LI> Informatica; <LI> Fizica; <LI> Chimia. </UL>

Liste numerotate:

Delimitarea listei: <OL> </OL> Selectarea tipului de marcaj: atributul TYPE= 1 | A | a | I | i Setarea numrului de start al listei: atributul START= x (x primul numr n list) Marcarea elementelor listei <LI> </LI> Exemplu, pentru a obine lista: 1. 2. 3. 4. Matematica; Informatica; Fizica; Chimia.

va fi nevoie de urmtoarea secven HTML: <OL > <LI> Matematica; <LI> Informatica; <LI> Fizica; <LI> Chimia. </OL>

Not: selectarea atributului Type=1 numerotare cu cifre arabe Type=I cifre romane majuscule Type=i cifre romane minuscule Type=A numerotare lexicografic, majuscule Type=a numerotare lexicografic, minuscule

Delimitarea listei: <DL> </DL> Delimitarea noiunii definite <DT> </DT> Delimitarea definiiei pentru noiune <DD> </DD> Exemplu, pentru a obine lista:

Not: secvenele <DT> i <DD> pot s nu fie nchise

HTML Noiunea HTML (HyperText Markup Language) se descifreaz ca Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborat de colaboratorul Laboratorului European de Fizic a particulelor Elementare Tim Berners-Ly. Document HTML Fiier text cu extensie *.html (n alte sisteme operaionale denumirea fiierului e nsoit de extensia *.html sau *.htm).

<DL> <DT>HTML <DD>Noiunea HTML (HyperText Markup Language) se descifreaz ca Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborat de colaboratorul Laboratorului European de Fizic a particulelor Elementare Tim Berners-Ly. <DT>Document HTML <DD>Fiier text cu extensie *.html (n alte sisteme operaionale denumirea fiierului e nsoit de extensia *.htmll sau *.htm). </DL>

Listele n documentele HTML pot fi incluse una n alta. Obinerea efectului cu instrumentele automate web 2.0 este de multe ori anevoioas sau chiar imposibil. Realizarea codului HTML este extrem de simpl: n locul elementului list se include descrierea listei incorporate:
<html> <head> <title> Exemplul 3.1</title> </head > <body> <H1>HTML poate lucra cu cteva tipuri de liste </H1> <DL> <DT><B>Liste fr numerotare </B> <DD>Elementele listelor fr numerotare se evideniaz prin deplasare spre dreapta i un semn special: <UL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </UL> <DT><B>Liste cu numerotare </B> <DD>Elementele listei cu numerotare se marcheaz prin deplasare spre stnga i un numr: <OL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </OL> <DT><B>Liste de definiii </B> <DD>Acest tip de liste este mai complicat dect precedentele, dar ne ofer mai multe posibiliti n lucru. <P>Listele pot fi incluse una n alta, dar nu facei abuz de aceast posibilitate. </P> <P>Un element al listei poate conine mai multe paragrafe. n acest caz toate vor ncepe din aceeai poziie de stnga </P> </DL> </body> </html>

Liniile sunt descrise de <HR> cu atribute auxiliare SIZE - determin limea liniei n pixeli WIDTH - determin lungimea liniei n % fa de limea ecranului, sau, n lipsa semnului % - n pixeli.

<html> <head> <title>Exemplul 2.2</title> </head> <body> <H1>O colecie de linii orizontale </H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=2 WIDTH=100><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=4 WIDTH=50><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html>

Creai n portofoliul personal o pagin cu numele Experiene n HTML 2. Scriei n pagin, n regimul de editare HTML cteva paragrafe de text i subtitluri, folosind diferite tipuri de aliniere. 3. Formatai primul paragraf, folosind stilurile fizice. 4. Formatai al doilea paragraf, folosind stilurile logice. 5. Creai cte o list cu marcare, numerotare, de definiii. 6. Creai o list inclus 7. Separai fiecare element creat de celelalte, folosind linii de diverse mrimi. 8. Salvai modificrile efectuate n pagin.
1.