�ݺ�ߣ

Tema 2 PC - Prelucrare de fișiere HTML
7.12.2012
Termen de predare: 16 decembrie 2012

Ce este HTML?
HyperText Markup Language este limbajul în care sunt scrise paginile web pentru a fi afișate în
browser. Elementele de sintaxă ale limbajului sunt reprezentate de:

● taguri: acestea se găsesc sub formă de perechi (un tag de început și unul de sfârșit - în
general), între care avem conținutul propriu-zis. Tag-urile sunt delimitate de paranteze
unghiulare (ex. <html> este un tag), iar tag-ul de sfârșit este marcat de prezența
caracterului “/” (ex. </html> perechea lui).Există însă și elemente care nu au un tag
separat de final, precum: img, input, br, hr (ex. <br />).
Ex:
<body>
<img src=/AndreeaDusk/tema2-pc2012-v2/"smiley.gif" alt="Smiley face" height="42" width="42" />
<br />
<hr />
<input type="reset" value="reset" />
<p>Acesta este un paragraf.</p>
</body>

● atribute: sunt definite în interiorul tag-urilor și reprezintă proprietățile pe care le poate
avea un element.
Ex: <input type="submit" value="Trimite" />

● valori: reprezintă valorile pe care le au atributele. Acestea sunt cuprinse între ghilimele
și urmează imediat după numele atributului
Ex: <input type="submit" value="Trimite" />

Numele tagurilor și a atributelor sunt scrise cu litere mici.

Mai multe detallii despre HTML găsiți la următoarele link-uri:
Ce este HTML?
Sintaxa HTML
Tutorial HTML
Exemple HTML

În ciuda acestor specificații, limbajul HTML nu este unul strict, de aceea este posibil să întâlnim
documente HTML care nu sunt bine formate (well-formed element).

1

Pentru a fi mai lizibil codul, documentele HTML sunt indentate (la fiecare nou nivel de imbricare,
crescând numărul de taburi).

Scopul acestei teme este de a transforma un document HTML astfel încât să fie bine-format și
să fie indentat corect.

Cerințe:

Fișierul sursă se va numi formatHTML.c și va primi ca parametri în linie de comandă numele
fișierelor de intrare și de ieșire.

Ex. de rulare:
./formatHTML test1_in.html test1_out.html

Va primi un singur fișier de intrare și un singur fișier de ieșire.
Pentru a citi/scrie din/în fișier veți folosi instrucțiunea freopen sau lucrul cu fisiere text (fopen,
etc.)
OBSERVATII:
1. Sirul in care se va citi continutul fisierului va fi alocat si realocat dinamic! Alocare initiala 300,
apoi se va realoca exact atat cat este nevoie pentru a memora sirul curent!
2. Lungimea maxima a unei linii din fisier este 300!

Etapa I. Indentarea documentului HTML

(20p) I.1.Fiecare tag, textul conținut între două tag-uri și respectiv comentariile se vor găsi pe
cate o linie nouă.

(20p) I.2.Nu trebuie să existe în textul dintre taguri caractere whitespace ( ‘ ‘, ‘t’, ‘n’, ’r’ ) la
început (leading whitespaces) sau la sfârșit (trailing whitespaces):
<tag>__text__</tag>
va fi modificat în
<tag>text</tag>
(caracterul ‘_’ reprezintă caracterul spațiu ‘ ‘).

(20p) I.3. Elementele din pagină vor fi indentate astfel încât la fiecare nivel de imbricare acestea
să se găsească cu un tab mai la dreapta. Dimensiunea tabului va fi de 4 caractere.

Comentariile se vor indenta la fel ca restul conținutului de la același nivel.

Etapa II. Fișierul de intrare HTML trebuie prelucrat astfel încât să respecte specificațiile HTML,
să fie bine format.

2

(20p) II.1. Valorile atributelor trebuie să fie cuprinse între ghilimele. Verificați dacă valorile
atributelor sunt încadrate corespunzător, în caz contrar închideți-le corect.
Valoarea unui atribut este formata dintr-un singur cuvant delimitat de white-spaces. Se
garanteaza faptul ca dupa o valoare de atribut va urma un spatiu, inclusiv daca este ultima
valoare din tag.

Exemplu:

Greșit: <input type=submit value="Trimite />
Greșit: <input type="submit value=Trimite" />
Corect: <input type="submit" value="Trimite" />

(20p) II.2. Trebuie să verificați dacă tag-urile sunt închise corect. În cazul în care lipsește un tag
de final, atunci va trebui să îl adăugați voi. Se garantează faptul că tagurile nu sunt imbricate
greșit (adica, un tag copil nu este inchis dupa parintele sau in fisierul de intrare). Daca un tag
self-closing nu are caracterul “/” inainte de “>”, atunci trebuie sa-l adaugati.
Ex: <img src=/AndreeaDusk/tema2-pc2012-v2/”o_cale” >
va trebui modificat în
<img src=/AndreeaDusk/tema2-pc2012-v2/”o_cale” />

Precizari:
-în interiorul tagurilor nu apar caracterele “<” și “>”; de asemenea nici în textul imbricat
într-un tag
- fișierele de input nu vor conține javascript și nici CSS. Pot, cel mult, să existe linkuri
către fisiere externe de CSS (ex: <link rel="stylesheet" type="text/css" href="/
css/plweb.css">) și atribute style în interiorul tagurilor
- tagul <html> este tagul rădăcină al întregului document si este exista sigur in fisier
- tagurile <body> și <head> se găsesc în interiorul tag-ului <html>. A se vedea structura
unui fisier html de la exemple
- un tag <h1>/.../<h6> nu include în interior alte taguri <h1>...<h6>, <p>, <div>
- un tag <p> nu include un tag <div>
- nu tratăm cazul listelor/tabelelor imbricate în cadrul acestui exercițiu
- 2 tag-uri identice(despre care nu am menționat nimic până acum) nu se pot cuprinde
reciproc, cu excepția tag-ului div
- Un tag care nu a fost închis conform niciunei specificații anterioare, va fi închis exact
înainte să se închidă tagul părintelui său.
Atenție la tagurile: br, hr, img, input care nu se găsesc în perechi!

Putem avea:
<div>
<div>
Corect: Div imbricat 1
<p>

3

Paragraf
</p>
</div>
<div>
Corect: Div imbricat 2
</div>
</div>
Sau:
<ol>
<li>
Hello from WebCodeGuide
</li>
<li>
Nice list!
</li>
<li>
Last list item!
</li>
</ol>

Însă nu putem avea:
<p>
Paragraf
<p>
Incorect: paragraf imbricat
</p>
</p>

Hint: pentru a ține evidența tagurilor deschise si închise puteți folosi un vector care va avea
rolul unei stive. O stivă funcționează după principiul Last In First Out (LIFO).

III. Bonus 1
● (5p) Toate whitespace-urile din textul dintre două tag-uri vor fi transformate în caracterul
spațiu ‘ ‘:
<tag>text_doartcunspatii</tag>
va fi modificat în
<tag>text_doar_cu_spatii</tag>
● (5p) Mai multe whitespace-uri consecutive vor fi reduse la un singur caracter ‘ ‘:
<tag>un_nntext___cantexemplu</tag>
va fi modificat în
<tag>un_text_ca_exemplu</tag>
● (5p) Dacă în final rezultă o linie goală (textul conținea doar caractere whitespace), nu
este scris nimic în fișierul de ieșire.
● (5p) Eliminați din tag-uri doar whitespace-urile care se află după caracterul ‘<’ sau
înainte de caracterul ‘>’:
<ntag atribut=”valoare”_>

4

trebuie modificat în
<tag atribut=”valoare”>

Exemple:
1. Input
<div>n
</div>

! Oservați linia goală și whitespace-ul.

Output corect
<div>
</div>

Output greșit
<div>
n
</div>

2. Input
<div>n
n
_un__text__</div>

! Caracterul ‘_’ reprezintă un spațiu.

Output corect
<div>
un_text
</div>

Bonus 2(10p):
● Între numele tag-ului și primul atribut, sau între perechile “atribut=valoare”, trebuie să
existe un singur caracter spațiu:
<tag__atribut1=”valoare1”natribut2=”valoare2”>
trebuie modificat în
<tag_atribut1=”valoare1”_atribut2=”valoare2”>
! Caracterul ‘_’ reprezintă un spațiu.
● Înainte de caracterul ‘/’ trebuie să existe un singur caracter spațiu:
<tag/>
va trebui modificat în
<tag_/>
Bonus 3(5p):
Toate tagurile și atributele acestora vor fi scrise cu litere mici, cu excepția directivei de
început(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">), care se gaseste pe prima linie a

5

fisierului.

Conținutul propriu-zis al tagurilor va fi lăsat neschimbat, la fel si conținutul comentariilor.
Un comentariu se găsește între semnele . Comentariile HTML nu pot fi imbricate.

Precizări:

● Sursa se va numi formatHTML.c. Eventual, dacă vă e mai uşor aşa, puteţi implementa
segmente de program şi în alte fişiere C pe care le veţi include de asemenea în arhivă,
dar trebuie să specificaţi acest lucru în readme!
● ATENȚIE! Prelucrările asupra stringurilor se vor face cu funcții din biblioteca
string.h, cat de mult posibil, nu caracter cu caracter.
● Tema va conţine şi un fişier Makefile în care veţi introduce două opţiuni: build, care
compilează sursa şi crează executabilul şi clean care şterge fişierul executabil, şi
fişierele cu extensia *.html din directorul curent.
● Executabilul creat de comanda make build (definită în Makefile) trebuie să se
numească formatHTML!
● Veţi trimite o arhivă zip cu numele grupa_nume_prenume.zip (exemplu
313CC_Popescu_Maria.zip) care va conţine
○ fișierul formatHTML.c, iar dacă este cazul, şi alte fişiere C scrise de voi care
sunt incluse în formatHTML.c
○ un fișier readme, în care specificați cerinţele pe care le rezolvă aplicaţia şi
precizări de implementare acolo unde este cazul
○ fişierul Makefile
○ un fişier text feedback.txt in care treceţi gradul de dificultate al temei, timpul
alocat rezovării şi eventualele comentarii, dacă este cazul.
● Atenţie la sintaxa de C! Nu folosiţi funcţii C++ sau alte construcţii specifice C++.
● Sursele vor fi compilate sub Linux, cu gcc.
● Nu uitaţi să eliberaţi memoria de care nu mai aveţi memorie cu funcţia free()! Veţi fi
depunctaţi 10p dacă programul scris de voi are pierderi de memorie (numite şi memory
leaks), adică dacă uitaţi să dezalocaţi memoria alocată în program. (Un program care
are pierderi de memorie va umple încet-încet întreg spaţiul de memorie RAM pe care îl
are la dispoziţie, va îngreuna sistemul şi în cele din urmă se va bloca). Pentru a vă testa
programul ca să fiţi siguri că nu are pierderi de memorie în Linux puteţi folosi un utilitar
numit Valgrind (instrucţiuni de folosire se găsesc mai jos).
● Puteți rezolva exercițiile în ce ordine preferați voi.

Transmiterea de argumente în linia de comandă

6

Programul scris de voi trebuie să poată fi folosit în consolă pentru a formata fişiere html.
Pentru aceasta, el va trebui să poată primi diverşi parametri în linia de comandă. Un program
scris în C poate accepta parametri din linia de comandă prin modificarea sintaxei funcţiei main
astfel încât aceasta să primească parametrii respectivi. Deoarece numărul de parametri care
vor fi transmişi nu este cunocut dinainte (ne putem imagina, de exemplu, că un utilizator în
necunoştinţă de cauză poate furniza orice opţiuni programului), funcţia main va accepta două
argumente, după cum urmează:

● argc de tip int reprezintă numărul de argumente transmis programului din consolă.
Atenţie! Primul argument este întotdeauna numele fişierului executabil care este rulat.
De aceea, argumentele propriu-zise sunt în număr de argc-1.

● char *argv[] reprezintă un şir de pointeri la caractere (stringuri) care constituie
argumentele efective transmise programului. După cum am spus anterior, argv[0]
reprezintă numele executabilului rulat, deci parametrii propriu-zişi încep de la elementul
de pe poziţia 1 şi sunt mereu de tip şiruri de caractere!
Pentru a clarifica sintaxa, iată un exemplu de program care afişează toţi parametrii pe
care i-a primit în linia de comandă.

# include <stdio.h>
int main(int argc, char *argv[])
{
printf("Numele executabilului rulat: %sn", argv[0]);
printf("Numarul de parametri propriu-zisi: %dn", argc - 1);

int i;
for (i=1; i <= argc-1; i++)
printf("Parametru cu numarul %d este: %sn", i, argv[i]);

fflush(stdin);
getchar();
return 0;
}

Copiaţi executabilul de mai sus într-un fişier C şi compilaţi-l folosind următoarele
comenzi:

gcc fisier_sursa.c -o executabil1
gcc fisier_sursa.c -o executabil2

Rulaţi pe rând următoarele comenzi şi observaţi funcţionalitatea programului.

./executabil1 -optiune1 valoptiune1 -optiune2 valoptiune2
./executabil2 -optiune val1,val2,val3

7

./executabil1 -optiune val1, val2, val3
./executabil1 -optiune val1 val2 val3
./executabil2 orice string este considerat dr3pt 4r9Um3n7
./executabil1 numerele 2 si 3 sunt considerate tot stringuri

GDB
GDB(The GNU Project Debugger) este un utilitar în linie de comandă pentru detectarea
problemelor care se produc în timpul execuției unui program. Un tutorial despre cum se
folosește găsiți aici.

Valgrind
Valgrind este un instrument de debugging pentru Linux folosit pentru depistarea greșelilor de
utilizare a memoriei: memory leak-uri, pointeri invalizi, folosirea unor variabile neinițializate, free-
uri invalide.
Pentru a folosi valgrind va trebui să instalați pachetul valgrind. De exemplu, pe distribuția
Ubuntu:
apt-get install valgrind
Pentru a rula programul în Valgrind cu tool-ul pentru memcheck folosiți:
valgrind --tool=memcheck ./formaHTML test_in.html test_out.html
Pentru afișare leak-urilor detaliat:
valgrind --tool=memcheck --leak-check=full ./formatHTML test_in.html
test_out.html

8

�ݺ�ߣ

Tema2 pc2012 v2

Recommended

More Related Content

Viewers also liked (13)

Similar to Tema2 pc2012 v2 (9)

Tema2 pc2012 v2