Fundamentele programării in html

AUTOR : Inf. GHEORGHE BOGDAN - DRAGOS E-mail : bogdan992@yahoo.com Telefon : 0729.171.

776

NOTA AUTORULUI
Aceasta carte incearca sa va introduca intr-o lume facinata a programarii la nivel mediu . Pentru a putea concepe o pagina web , trebuie sa asimilati cunostintele din aceasta carte ! Cartea este conceputa pentru incepatori !

Copyright 2008-2009 , Autor : Inf. Gheorghe Bogdan Dragos

CUPRINS
Pagina 3 ...... Introducere in HTML Pagina 4 ........ Salvari , extensii ,etc.... Pagina 5 – 6 – 7 – 8 – 9 ........... Liste , tabele , elemente intalnite in liste , liste de definitii , Pagina 9 – 10 – 11 ....TABELE SI FORMATAREA SCRISULUI COLORAT , TERMENI SI DEFINITII Pagina 11 ........... Adăugarea referinţelor şi legăturilor , Adăugare legături către ţinte din cadrul paginilor Pagina 12 ............ Adăugare legături către ţinte din cadrul paginilor Web Pagina 13 ............ Test de evaluare a cunostintelor

PROGRAMAREA IN HTML Html este un limbaj de programare .Ca toate limbajele de programare acesta are si o functionalitate , limbajul html ne ajuta pe noi la constructia paginilor web . Html nu este singulul limbaj de programare folosit in crearea de pagini web , aici mai putem adauga multe altele cum ar fi JAVA , PHP , CSS , FLASH , etc…. Un document html poate fi scris cu mai multe utilitare cum ar fi : Notepad ; Word ; WordPad , sau in editoare speciale complexe cu multe instrumente pentru o pagina web . Cum ar fi : NetScape composer ; Hot Meta . Structuri La baza unei pagini web , avem un cod sursa care contine : - tag-uri - etichete - marcaje

Tag-uri pot fi de tip bloc (pereche) , adica acolo unde incepe sectiunea de date si totodata si deschiderea , aici avem si inchiderea sectiunii de date declarate in codul sursa . Acestea se numesc tag-uri . exemplu : <html>…………..</html> </…> - inchidere sectiune <…> - deschidere sectiune

Singulare de tipul “br” , sau (break) acest tag este folosit la lucrul cu liniile . Acesta face ca un grup de cuvinte de pe o linie sa poata fi pus pe mai multe linii . exemplu : linia1…………………………ANA<br>ARE MULTE MERE linia 2……………………………. ARE MULTE<br>MERE linia 3…………………………….. MERE O pagiana standard poate fi formatata dintr-un bloc extern cum ar fi : <html> …..</html> <html> reprezinta inceputul bloc-ului sau a sectiunii , iar </html> reprezinta sfarsit-ul blocului / sectiunii . Aici mai sunt doua mari si foarte importante bloc-uri : antet-ul <head> ………. </head> si corpul <body> …… </body> Pentru a afisa pe pagina web un text sau mai multe , trebuie sa folosim un tag de preformatare <pre> …… </pre> .

SALVARI SI EXTENSIILE HTML Extensii : (*htm) sau (*html) ; sau (*php) daca si numai daca ati scris pagina intr-un cod sursa php care trebuie sa genereze un cod html

Exemplu : <html> <head> <title>Titlul primei pagini</title> </head> <body> <pre> ANA ARE MERE MULTE MAMA ARE MERE MULTE </pre> </html> </body> Efecte la textul in html Exemplu : <i> textul scris </i> <u>textul scris </u> <b>textul scris </b> <big> textul scris</big> <small>textul scris</small> <strike>textul scris</strike> Un text poate avea efecte combinate cum ar fi : italic si boldat ; italic subliniat ; boldat subliniat ; mare subliniat ; boldat mare , etc…. gama de combinatii nu se termina aici , mai sunt multe alte combinatii . Exemplu : <i><u>textul scris<u></i> <u><s>textul scris <s></u> <b><u>textul scris </u></b>

Textul poate avea mai multe marimi , aceste marimi in limbajul html se noteaza cu “ H sau h “ , h semnificand inaltimea literelor Exemplu : <H1> ana are mere </H1> Indicativul H , specific inaltimii tine cont si de cifra precedenta , care arata cat de inalte sa fie literele <H1> ana are mere </H1> , h1 scrie cu caractere foarte mari inaltimea in programarea limbajului html este notata cu indicative numerice de la 1 la 5 , dar trebuie sa tinem cont ca inaltimea scade de la 1 catre 5. <H5> ana are mere </H5> , h5 este cel mai mic scris fata de h1 Sintaxele de text cu marimi sau efecte se icadreaza dupa sectiunea “<body> “. La sintaxele de marime a textului sau a caracterelor din text se pot adauga diferite efecte combinate pentru a modifica tipul de scris . Exemplu : <H1><U><I>TEXTUL MEU </H1></U></I> , aceasta combinatie afiseaza TEXTUL MEU cu marime H1 inclinat si subliniat , deci de aici tragem concluzia ca se pot combina comenziile de marire a textului cu efectele de stiluri de scriere . Alte tipuri de scrisuri : <sup>……</sup> - acest tip de scris este pentru marcarea textului ca exponent <sub>…….</sub> - acest tip de scris este pentu marcarea textului ca indice <small>…..</small> - acest tip de scris este pentru scrierea micsorata . Exemplu : <sup><i>an</sup></i> - aici va afisa “an” ca exponent cu scris de tipul italic (inclinat) <small><i>ana are mere</small></i> - aici va afisa “ana are mere” cu scris micsorat de tip italic Liste in html Exista mai multe tip-uri de liste : -Liste ordonate -Liste neordonate cu buline sau fara -Liste de definitie Sa incepem prin a va arata ansamblul de sinaxe pentru listele ordonate . Aceste liste sunt liste cu numerotare adica fiecare rand scris de dumneavoastra intr-o lista are un numar in fata :

Exemplu : <OL COMPACT START=1 TYPE=1> <LI>primul element <LI>al doilea element <LI>al treilea element <LI>al patrulea element </OL> Liste ordonate in sursa html : <HTML> <HEAD> <TITLE>LISTA ORDONATA </TITLE> </HEAD> <BODY> <OL COMPACT START=1 TYPE=1> <LI>primul element <LI>al doilea element <LI>al treilea element <LI>al patrulea element </OL> </BODY> </HTML> Listele neordonate : Aceste liste pot fi cu buline sau fara , adica fiecare linie scrisa in lista sa aiba o bulina in fata Structura interna a acestor liste este cu mult diferita listelor ordonate , deoarece listele ordonate nu au in componenta lor semen inaintea liniei scrise ci au caractere numerice . Exemplu : <UL COMPACT TYPE=disk> <LI>AN <UL COMPACT TYPE=square> <LI>AN 1 <LI>AN 2 <LI>AN 3 </UL> <LI>textul scris 1 <LI>textul scris 2 <LI>textul scris 3 </UL>

Liste neordonate in sursa html : <HTML> <HEAD> <TITLE>LISTE NEORDONATE </TITLE> </HEAD> <BODY> <UL COMPACT TYPE=disk> <LI>AN <UL COMPACT TYPE=square> <LI>AN 1 <LI>AN 2 <LI>AN 3 </UL> <LI>textul scris 1 <LI>textul scris 2 <LI>textul scris 3 </UL> </BODY> </HTML> Elemente intalnite in liste : VALUE = indicã valoarea numericã TYPE = permite sã se fixeze stilul pentru buline sau pentru numerotãri Liste de definitii : <DL COMPACT> <DT>ANA</DT> <DD>fata femeie</DD> <DT>CAR </DT> <DD><OL><LI>autoturism , masina de transport ; <LI>auto </OL> <DT>AUTO </DT> <DD><OL><LI>AUTO <LI>Autoturism</OL></DD> <DT>text </DT> <DD>text ; scris ; sriere </DD> <DT>textulet </DT> <DD>diminutiv</DD> </DL>

Lista definitii in sursa html : <HTML> <HEAD> <TITLE>LISTE NEORDONATE </TITLE> </HEAD> <BODY> <DL COMPACT> <DT>ANA</DT> <DD>fata femeie</DD> <DT>CAR </DT> <DD><OL><LI>autoturism , masina de transport ; <LI>auto </OL> <DT>AUTo </DT> <DD><OL><LI>AUTO <LI>Autoturism</OL></DD> <DT>text </DT> <DD>text ; scris ; sriere </DD> <DT>textulet </DT> <DD>diminutiv</DD> </DL> </BODY> </HTML> Acestea fiind spuse , vom trece la o structura noua adica tabele si scheme de scrisuri pe culori . In acest capitol vom invata despre diferite stiluri de tabele , si diferite stiluri de culori care le vom aplica in combinatia cu scrisul de diferite feluri . TABELE SI FORMATAREA SCRISULUI COLORAT Pentru a creea un tabel in limbajul Html , despre care totodata si vorbim , mai intai va trebui sa folosim diferite sintaxe cum ar fi : Sintaxa pentru a putea insera un rand : <tr>...</tr> reprezinta table row , adica rand de tabel Sintaxa pentru a putea insera un tabel : <table>...</table> reprezinta table = tabel
Un rand este format din mai multe celule ce contin diferite date si diferite stiluri de caractere . Sintaxa pentru o celula de date : <td>..</td>. Reprezinta table data = date de tabel Pentru a putea intelege mai bine ce putem face cu sintaxele de mai sus , in urmatoarele randuri , voi arata cum se face un tabel simplu de mici dimensiuni .

Exemplu de tabel simplu : <html> <head><title>tabelex_2</title></head> <body><h1 align="center">Acesta este un tabel </h1><hr> <table border="4"> <tr> <td>ANA </td><td>ANA </td></tr> <tr> <td>Traian </td><td>Traian </td></tr> <tr> <td>Balcescu </td><td>Balcescu </td></tr> <tr> <td>Badea </td><td>Badea </td></tr> </table> </body> </html> In urmatoarele tabele va voi arata mai multe sintaxe folositoare In urmatorul tabel vom folosi bgcolor pentru a colora tabelul si celulele acestuia diferit Exemplu de tabel colorat : <html> <head><title>Tabel colorat</title></head> <body><h1 align="center">Tabel colorat </h1><hr> <table border="8" bgcolor="blue"> <tr> <td>AB </td><td bgcolor="red">ABC</td></tr> <tr bgcolor="green"> <td>ABCD </td><td bgcolor="yellow">ABCDE</td></tr> <tr bgcolor="cyan"> <td>ABCDEF </td><td>ABCDEFG </td></tr> <tr> <td>ABCDEFGH</td> <td bgcolor="white">ABCDEFGHI </td></tr> </table> </body> </html> Pentru a putea sa punem celula langa celula fara separatii cu bordure si linii vom folosi urmatoarele sintaxe :
Cellspacing - folosita pentru definirea distantei dintre celulele vecine

<html> <head><title>Tabel cu celule alipite</title></head> <body><h1 align="center">Tabel celule alipite </h1><hr> <table cellspacing="2"> <tr> <td bgcolor="gray">ABA </td><td bgcolor="red">TERRA </td></tr> <tr bgcolor="blue"> <td>TORNA </td><td bgcolor="green">TOOB</td></tr> </table> </body> </html>

TERMENI SI DEFINITII Poate de multe ori v-ati intrebat ce este o hiper legatura sau ati mai auzit de expresia Hiperlink , aceste doua mari “ “ “probleme “ , sunt niste legaturi spre o cale anume , codul de mai jos face o legatura spre un fisier de tip (*.zip) Studiati cu atentie codul sursa si observati ca un link intr-o pagina se aplica cu sintaxa : <a href="">

De exemplu : <html> <head> <title> Legaturi catre fisiere oarecare</title> </head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="abc.zip"> Link catre fisierul fisier.zip </body> </html>

1.3. Adăugarea referinţelor şi legăturilor
1.3.1.Referinţe către alte pagini Web
Marcajul principal utilizat este cel ancoră <A > împreună cu perechea sa </A>, care trebuie să conţină atribute fără care acest marcaj nu are sens şi nu afectează formatarea informaţiei.Atributul care trebuie specificat este cel de referinţă hipertext HREF=”valoare”. Valoarea poate fi vida dar atributul trebuie specificat pentru ca lagătura să apară activă în programul de navigare. Ex. Puteti vizita <A HREF=”http://www.whitehouse.gov/”> Casa Alba on line!</A>

1.3.2.Referirea informaţiilor non-Web
Se realizează pur şi simplu folosind un URL adecvat care utilizează următoarea formă generală: serviciu://numegazda (:port)-director (si nume fisier) unde serviciul paote lua valorile http protocol de transfer hipertext mailto adresa de postă electronică telnet telnet către un sistem aflat la distanţă ftp fisier arhivă ftp news server-ul de stiri usenet Ex. Utilzare locaţie gopher a Comisiei pt. protectia consumatorilor şi respectiv mailto pentru trimitere mesaje... <A HREF=http://www.google.ro GOOGLE </A> <I>Am omis ceva? <A HREF=mailto:bobg@yahoo.com> Trimite un mesaj!</A><I> Marcaj HTML <A> <HREF>=url </A> Marcaj închidere Semnificaţie Marcaj de tip ancora Referinta hipertext

1.4.Referinţe interne în cadrul documentelor
1.4. 1.Definirea ţintelor într-un document Web
Una din problemele cu care se confruntă proiectanţii de pagini Web este când este optimă plasarea unui document într-un fişier unic HTML şi cînd e optimă organizarea sa ca un set de fişiere. O regulă empirică utilizată este următoarea – separarea paginilor prin puncte logice de salt şi minimizarea timpului de încărcare pentru cititori. Ţintele salturilor sunt cunoscute sub nume de ancore de nume. Marcajul HTML pentru un punct-ancora este o variantă a marcajului <A> de tip <A nume=valoare> unde valoarea poate fi orice secvenţă de caractere, numere, semne de punctuaţie. Unele programe de navigare impun ca toate caracterele din ancoră să fie litere mici- testaţi restricţiile !! Ancorele sunt destinaţii din cadrul paginii curente şi nu legături către exterior textul nu este scos în evidenţă în nici un fel. Acest marcaj trebuie închis cu marcajul pereche </A>.

1.4.2.Adăugare legături către ţinte din cadrul paginilor Web
Marcajul care defineşte un salt la o legătură activă din cadrul documentului este tot o variantă a marcajului <A> caz în care atributul necesar este o referinţă de tip hipertext de tip HREF dar URL-ul este înlocuit de numele ancorei în faţa căruia se utilizează simbolul diez(#). Ex. Utilizare referinta prin creare pagina cu reguli ce trebuie respectate la realizarea unei pagini Web <A NAME=”Ghid”> <CENTER> <H1> Reguli pt. proiectare pagini Web</H1></A> <Font SIZE=2> <a href=#Regula1>Regula 1</a> | <a href=#Regula2>Regula 2</a> | <a href=#Regula3>Regula 3</a> | <a href=#Regula4>Regula 4</a> </Font> <p> </CENTER> <BLOCKQUOTE> <DL> <A NAME=”Regula1”> <DT><B>Regula #1:</A> <DD>Intelege intentiile utilizatorului si modul in care utilizeaza paginile Web si apoi concentreaza-te asupra modului de proiectare in functie de necesitatile si interesul acestora</B> </DL><DL> <A NAME=”Regula2”> <DT><B>Regula #2:</A> <DD>Sa fi cumpatat cu elementele grafice </B> </DL><DL> <A NAME=”Regula3”> <DT><B>Regula #3:</A> <DD>Paginile chiar cele care includ elemente grafice nu trebuie sa se incarce in mai mult de 30 de secunde</B> </DL><DL> <A NAME=”Regula4”> <DT><B>Regula #4:</A> <DD> Minimizeaza paleta de culori</B> </DL></BLOCKQUOTE>

Test – Limbajul HTML

1. Ce este limbajul HTML? a. un pseudocod pentru scrierea programelor; b. un limbaj de marcare utilizat pe Web; c. un cod vizualizat cu ajutorul unui limbaj de programare; 2. Care sunt marcajele obligatorii într-un document HTML? a. <HTML>, <TITLE>, <HEAD>, <BODY>; b. <HTML>, <A HREF>, <B>, <BODY>; c. <HTML>, <I>, <IMC SRC>, <TITLE>; 3. Care din afirmaţiile de mai jos sunt adevărate: a. „În spatele” unei pagini Web se află un cod sursă; b. pot crea pagini Web cu ajutorul programului Excel; c. pot crea pagini Web cu ajutorul programelor Word şi Power Point; 4. Ce este o hiperlegătura? a. o imagine; b. codul sursă; c. o legătură pentru deplasarea la o locaţie dată; 5. Care este marcajul corect pentru realizarea unei hiperlegături? a. <IMC SRC>; b. <BODY COLOR>; c. < A HREF =”TINTA”> text </A>; 6. Care din tipurile de liste de mai jos sunt acceptate de limbajul HTML? a. liste numerotate şi nenumerotate; b. liste de tip glosar; c. liste multi-coloană de tip director; 7. Ce tipuri de imagini pot fi prelucrate de HTML în realizarea paginilor Web? a. GIF, JPEG; b. PNG; c. XMB, XPM; 8. Declararea unui formular se face cu ajutorul marcajului: a. <FORM ACTION =”URL”>; b. <ISINDEX>; c. <FORM> </FORM>; 9. Marcajele necesare creării unui tabel sunt: a. <TABLE> </TABLE>, <TR>, <CAPTIONA>; b. <TABLE> </TABLE>, <TH/D COLSPAN=N>, <TH/D ROWSPAN=N>, <CAPTION>; c. <TABLE> </TABLE>, <TD>, <TH>;

Sign up to vote on this title
UsefulNot useful