Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Laborator 1 Grafica

    Încărcat de

    AzuWillDie
    5 vizualizări5 pagini
    laborator grafica

    Titlu original

    laborator 1 grafica

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    laborator grafica

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    5 vizualizări5 pagini

    Laborator 1 Grafica

    Încărcat de

    AzuWillDie
    laborator grafica

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    Seminar 1: familiarizarea cu stilul sintactic al HTML i modul de lucru

    Noiuni introductive HTML (Hyper Text Markup Language) este un limbaj folosit pentru descrierea paginilor web. HTML este un limbaj de marcare ce utilizeaz un set de tag-uri de marcare pentru a descrie pagini web, nefiind considerat un limbaj de programare. Tag-urile de marcare HTML sunt de obicei numite tag-uri HTML. Tag-urile HTML sunt cuvinte cheie nconjurate de paranteze unghiulare precum <html>. n general tag-uri HTML sunt folosite n pereche precum <html> i </html>, <b> i </b>. Primul tag dintr-o pereche este tag-ul de nceput, sau de deschidere <html>, pe cnd tag-ul al doilea este tag-ul final, sau de nchidere </html>. Un document HTML poate fi considerat ca fiind o pagin Web. Un document HTML descrie o pagin web i conine att tag-uri HTML cat i text simplu. Un fiier *.HTML poate fi editat n orice editor de texte, inclusiv Notepad. Paginile HTML sunt afiate intr-un browser web, precum Internet Explorer, Chrome sau Firefox. Un browser web nu afieaz etichetele HTML, dar folosete tag-uri pentru a interpreta i a citi coninutul documentelor HTML i a le afia n paginile web. CSS provine de la Cascading Style Sheets i este un limbaj de stiluri ce definete modul de afiare al elementelor HTML. Cu ajutorul CSS dezvoltatorii site-urilor web pot stoca separat stilurile. Acestea conin informaii cu privire la formatarea i prezentarea paginilor web i sunt stochate de obicei intrun fiier *.css extern. Astfel se realizeaz o separare ntre coninutul documentelor HTML i modul n care elementele HTML sunt afiate. Avantajul major al utilizrii fiierelor css externe l reprezint posibilitatea modificrii aspectului i structurii ntregului site web prin editarea unui singur fiier. HTML este un limbaj care furnizeaz browser-ului informaii despre structurarea elementelor n pagina cu ajutorul etichetelor, respectiv tag-urilor de marcare. Codul HTML introdus trebuie sa fie cuprins ntre tag-urile pereche <html>...</html>. Fiecare document HTML are dou pari: antetul situat ntre tag-urile <head>...</head> i corpul documentului situat ntre tag-urile <body>...</body>. Mai jos avem sintaxa ce definete structura unui document HTML:
    <html> <head> <title>Titlul paginii web</title> </head> <body> Continutul/corpul paginii web </body> </html>

    Probleme propuse Problema 1. S se creeze o pagin web, numit pagina.html, care s afieze textul: Prima mea pagina web. Rezolvare 1. Deschidem editorul Notepad. 2. Introducem n zona de editare urmtorul cod HTML.
    <html> <head> <title>Prima mea pagina Web</title> </head> <body> Aceasta este prima mea pagina web. </body> </html>

    3. Salvm coninutul din editorul Notepad cu numele pagina.html. Alegem din meniul File opiunea Save As. La Save n alegem directorul n care salvam fiierul iar la File name tastam textul pagina.html. Mergem n directorul n care am salvat fiierul pagina.html i l deschidem executnd dublu click pe acesta. Observam rezultatul n browser. Rezultatul se poate observa i n figura 1.

    Figura 1. Vizualizarea rezultatului n browser

    Problema 2. S se creeze o pagin web numit index.html care s fie mprit n patru zone de coninut cu ajutorul unei structuri tabelare. Pagina web trebuie s conin cte o zon pentru antet, meniul de navigare, textul paginii i subsolul acesteia. Rezolvare 1. Deschidem editorul Notepad i introducem n zona de editare urmtorul cod HTML.
    <html> <head> <title>Pagina web cu structura tabelara</title> </head> <body> <table border="1" width="600px" bgcolor="#FFFFFF"> <tr> <td colspan="2" align="center"> Antetul paginii web </td> </tr>

    <tr> <td valign="top" width="30%"> Meniu principal: </td> <td valign="top" width="70%"> Textul paginii web </td> </tr> <tr> <td colspan="2" align="center"> Subsolul paginii web </td> </tr> </table> </body> </html>

    2. Salvam coninutul din editorul Notepad cu numele index.html. Mergem n directorul n care am salvat fiierul index.html i l deschidem n browser. Rezultatul se poate observa i n figura 2.

    Figura 2. Vizualizarea rezultatului n browser

    Problema 3. S se editeze pagina web index.html.n partea de antet se va insera un fiier *.jpg, iar n partea de meniu principal dou liste care conin link-uri. Rezolvare 1. Deschidem n Notepad fiierul index.html, creat la problema 2, i modificm codul HTML.
    <html> <head> <title>Pagina web cu structura tabelara si meniu</title> </head> <body> <table border="1" width="600px" bgcolor="#FFFFFF"> <tr> <td colspan="2" align="center"> <img src="fisiere/header.jpg" width="600px" height="60px"> </td> </tr> <tr> <td valign="top" width="30%"> Meniu principal: <ul>

    <li><a href="index.html">Prima pagina</a></li> <li><a href="pagina.html">Pagina</a></li> </ul> Link-uri diverse: <ol> <li><a href="fisiere/cv.doc">Download CV</a></li> <li><a href="fisiere/cv.pdf">Vizualizare CV</a></li> <li><a href="http://www.google.com">Google</a></li> </ol> </td> <td valign="top" width="70%"> Textul paginii web </td> </tr> <tr> <td colspan="2" align="center"> Subsolul paginii web </td> </tr> </table> </body> </html>

    2. Salvm coninutul din editorul Notepad cu numele index.html. 3. n cadrul directorului curent de lucru se va crea un nou director numit fisiere. 4. n Paint setm dimensiunea unui fiier la 600 x 30px i introducem textul Antetul paginii web. Salvm fiierul cu numele header.jpg. Copiem n interiorul directorului fisiere fiierul cu numele header.jpg care va fi afiat n antetul paginii web. De asemenea vom mai copia dou fiiere denumite cv.doc, respectiv cv.pdf. Primul va fi descrcat n momentul n care se d click pe link-ul Download CV, iar al doilea va fi deschis n momentul n care se d click pe link-ul Vizualizare CV. Rezultatul se poate observa n figura 3.

    Figura 3. Vizualizarea rezultatului n browser

    Observaii: O legtura sau unu link se formeaz cu ajutorul etichetei <a href=></a> (de la "anchor"= ancora). n cazul n care dorim s inserm o legtura ctre un fiier aflat n directorul nostru, de exemplu spre cv.doc, vom indica atributului href numele fiierului respectiv. n momentul n care se efectueaz clic pe legtura, browserul deschide o caseta de dialog intitulata "File download" ce va permite salvarea pe calculatorul local a fiierului sau lansarea n execuie a aplicaiei capabile sa interpreteze corect fiierele de tipul respectiv (n cazul fiierelor *.pdf). Zona activa care devine sensibila la apsarea butonului stng al Mouse-ului este formata din textul, poza, sau obiectul cuprins intre etichetele <a> i </a>. n cazul n care se dorete deschiderea paginii referite intr-o fereastra noua se adaug atributul target="_blank". Mai jos avem sintaxa de definire a unui link (cale relativ/absolut):
    <a href="cv.pdf" target="_blank">Vizualizare CV</a> <a href="http://www.google.com">Google</a>

    Validarea documentelor HTML este deosebit de important. Acest lucru se poate realiza la urmatoarea adresa: http://validator.w3.org. Acest validator verific valabilitatea documentelor web n HTML, XHTML etc.

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