Aeronautica	Comunicatii	Drept	Informatica	Nutritie	Sociologie
Tehnica mecanica

Html

Qdidactic » stiinta & tehnica » informatica » html
Bazele unei pagini HTML - curs HTML - rapid si simplu

Bazele unei pagini HTML - curs HTML - rapid si simplu

Capitolul 1(Cum sa construiesti o pagina web)

Sa incepem

Acest tutorial te va invata cum sa iti scrii propriile pagini web in limbaj HTML. Nu ai nevoie de vreun editor special pentru a folosi acest ghid, orice editor de text este perfect atata timp cat stii sa il folosesti. Invatand HTML vei avea mai mult control asupra aspectului paginei tale web, si vei descoperi cu usurinta cai pentru a imbunatati chiar mai mult aspectul paginei web. HTML este un limbaj independent de platforma pe care ruleaza adica nu se schimba de la un calculator la altul sau de la un program la altul. Cele mai intalnite editoare HTML sunt Notepad pentru Windows si Pico pentru Linux. Pentru salvare in format HTML selectati in editor 'all format' si la numele documentului adaugati terminatia '.html', aceasta in cazul in care editorul nu are optiune de a selecta direct extensia HTML. Pentru ca pagina ta web sa poata fi vazuta in WWW trebuie pusa pe un server, pentru inceput daca nu aveti deja un server setat acasa sau un host, cautati host gratis care pot oferi indeajuns de mult spatiu pentru inceput.

Scrierea documentelor HTML

Dupa ce v-ati gasit un host pentru a va plasa site-ul sau pagina web, trebuie sa incepeti crearea paginilor. Cand lucrezi cu HTML este foarte indicat de a avea 2 copii a documentului. O copie trebuie sa fie pe spatiul alocat de host iar a doua pe hard-ul dumneavoastra, astfel problemele cu caderile de curent, pierderea conexiunii la internet neafectand munca dumneavoastra. Recomand crearea unui director pe hard disk pentru a pune in el documentele HTML, imaginile , sunetele care doriti sa apara pe site.

Index.html

Pagina principala trebuie denumita 'index.html', majoritatea serverelor fiind setate sa recunoasca pagina principala dupa aceasta denumire. In cazul in care 'index.html' nu functioneaza ca pagina principala, contactati persoana care administreaza server-ul si intrebati-l ce denumire are server-ul setata pentru a recunoaste pagina principala.

Capitolul 2(Bazele unei pagini HTML)

Taguri

Pagina pe care o vizionezi acum este un document HTML, vezi link-ul 'html2.html' unde 'html2' este denumirea pe care i-am dat-o acestei pagini web iar'.html' este extensia documentului.
Intr-un document HTML poti avea caractere bold, italice, mici si mari.

Pentru a crea propozitia de mai sus, codul HTML va arata asa:

Intr-un document HTML poti avea caractere <b>bold</b> , <i>italice</i>, <font size=-2>mici</font> si <font size=+2>mari</font>

Bine, binedar ce inseamna aceste '<' si '>' ? Cand scrii un anumit lucru intre aceste doua semne, creezi un lucru cunoscut sub numele de tag. De exemplu, tagul <b> da comanda de a incepe scriere cu caractere bold, si tagul </b> da comanda de a opri scrierea cu caractere bold. Tagul cu semnul slash(/) este cunoscut ca tag de inchidere. Cele mai multe taguri necesita si un tag de inchidere, dar nu toate. Tagurile formeaza intreaga structura a unui document HTML.

<b>Acest text are caractere bold.</b> ,
<b> este tag de deschidere iar </b> este tag de inchidere.

Sa incercam un mic exercitiu:

#1:Eu <b>invat</b> html. = Eu invat html.
#2:Eu <b>invat<b> html. = Eu invat html.
in a doua propozitie este o greseala, care este? Cu siguranta ai observat lipsa (/) din al doilea tag al propozitiei 2, astfel browser-ul neavand comanda de a inchide textul scris bold.

Structura documentelor HTML

Documentele HTML sunt fisiere ce contin texte, si care primesc extensia .htm, .html, .shtml. Documentele HTML au doua parti, 'head'-ul si 'body'-ul. 'Body' este partea mai mare a documentului in care se va gasi continutul paginii.'Head'-ul unui document contine titlul acelui document si o scurta descriere.

Structura unui document HTML, exemplu:

<html>
<head><title>Titlul aici</title></head>
<body>Continut pagina aici</body>
</html>

Pentru a intelege mai bine si usura munca, poti lasa spatii intre liniile documentului.

Nota: Spatiile libere vor fi ignorate de catre browser in momentul interpretarii.

Tot ceea ce se gaseste intre tagurile title va fi titlul documentului, acesta va aprea in momentul vizionarii documentului in susul paginii in bara pentru titlu (in stanga butoanelor de minimalizare/maximalizare/inchidere ale paginii).

Titlul acestei pagini este 'HTML:Bazele unei pagini HTML', fiind precedat in cazul sistemelor windows de 'Microsft Internet Explorer'.

Capitolul 3(Bazele unei pagini HTML)

Heading-uri

Heading-urile sunt unele dintre cele mai importante taguri din continutul(body) al unui document HTML. Tagul de deschidere pentru heading este <hn> si cel de inchidere fiind </hn> unde 'n' reprezinta marimea heading-ului; acesta variand de la 1 la 6 (1 fiind cel mai mare iar 6 cel mai mic).

Exemple:

Coyotul pregateste capcane.

sursa: <h1> Coyotul pregateste capcane. </h1>

Coyotul pregateste capcane.

sursa: <h2> Coyotul pregateste capcane. </h2>

Coyotul pregateste capcane.

sursa: <h3> Coyotul pregateste capcane. </h3>

Coyotul pregateste capcane.

sursa: <h4> Coyotul pregateste capcane. </h4>

Coyotul pregateste capcane.

sursa: <h5> Coyotul pregateste capcane. </h5>

Coyotul pregateste capcane.

sursa: <h6> Coyotul pregateste capcane. </h6>

Linii orizontale

Liniile orizontale sunt folosite pentru a separa diferite arii intr-o pagina web. Tagul pentru linie orizontala este <hr>, aceasta comanda nu are tag de inchidere. I se pot adauga acestui tag diferite atribute, ca: width=n (pentru lungimea liniei) sau width=n% (pentru lungimea liniei raportate la toata lungimea ecranului), size=n (pentru linie ingrosata dar transparenta) si noshade (pentru linie ingrosata plina). Un tag <hr> fara atribute va fi interpretat ca linia sa aiba toata lungimea paginei.

Exemple:

<hr noshade>

Nota:Se pot folosi mai multe atribute intr-un tag.

Capitolul 4(Taguri uzuale)

Paragrafe

Paragrafele se folosesc destul de des in HTML, la fel ca in scrierea unei povesti, carti, etc..Tagul de deschidere pentru paragraf este <p>, iar cel de inchidere este </p>. Tagul de inchidere pentru paragraf nu este intotdeauna necesar dar se recomanda folosirea lui.

Exemplu:(o perla de la BAC)

In 'Sobieski si romanii' autorul descrie cum o mana de plaiesi au rezistat asediului perfid al puternicei armate din Iasi. In final, plaiesii se predau in mod eroic, lasand Cetatea Neamtului.

Sursa: <p> In 'Sobieski si romanii' autorul descrie cum o mana de plaiesi au rezistat asediului perfid al puternicei armate din Iasi. In final, plaiesii se predau in mod eroic, lasind Cetatea Neamtului.</p>

Formatul textului

O pagina web fara un format anume al textului va arata plictisitoare. De aceea se folosesc aceste taguri pentru text(bold, italice, subliniat).Cateva taguri cunoscute pentru formatul textului sunt <b> si </b> pentru bold, <i> si </i> pentru italice, <u> si </u> pentru subliniat. Pentru dimensiunea textului se folosesc tagurile <font size=n> si </font>.

Exemplu:
Ema este o fata foarte frumoasa.

Sursa:<b>Ema</b> <i>este</i> <u>o fata</u> <font size=+2>foarte frumoasa.</font>

Atribute de aliniere in pagina web

Multe taguri suporta atribute de aliniere in pagina; aliniere la stanga, in centru, la dreapta. Atributul align se ataseaza tagului de deschidere inaintea semnului >.

Exemple:

Aliniere stanga

<h2 align=left>Aliniere stanga</h2>

Aliniere centru

<h2 align=center>Aliniere centru</h2>

Aliniere dreapta

<h2 align=right>Aliniere dreapta</h2>

Sfarsitul randului

Referat: Modelul OSI - nivelul fizic, legatura de date, retea, transport

Referat: Alocarea memoriei - alocarea de memorie in limbaje de programare

Tagul pentru sfarsit de rand este <br>. Acest tag nu are un altul pentru inchidere.

Exemplu fara tag de sfarsit de rand:
O cafea. Doua Cafele. Trei cafele.
Sursa:
O cafea.
Doua cafele.
Trei cafele.

Exemplu cu tag de sfarsit de rand:
O cafea.
Doua cafele.
Trei cafele.
Sursa:
O cafea.<br>
Doua cafele.<br>
Trei cafele.<br>

Capitolul 5(Imagini si Link-uri)

Link-uri

Link-urile sunt esenta webului, fara acestea paginile unui sit nu ar avea legatura intre ele. Pentru a adauga un link se foloseste tagul de deschidere <a href='locatie'> si tagul de inchidere </a>. Tot ce va aparea intre aceste doua taguri va fi subliniat si colorat, iar in momentul click-ului pe acel text, browser-ul va fi trimis spre locatia data.

Exemplu:
Viziteaza Autosite!
Sursa:
Viziteaza <a href='https://www.autosite.ro/'>Autosite</a>!

Daca link-ul este catre o pagina care se afla in acelasi director cu pagina curenta, nu mai ai nevoie sa introduci url-ul, doar numele paginii. Spre exemplu, daca ai o pagina care se numeste publicitate.html, poti folosi codul <a href='publicitate.html'>Publicitate</a>

De retinut:link-urile sunt folosite pentru a naviga de la o pagina la alta, dar pot fi folosite si pentru trimiterea mail-urilor.
Exemplu:
Trimite un email la WebMaster!
Sursa:
Trimite un email la <a href='mailto:emgos_@hotmail.com'>WebMaster</a>!

Tagului de deschidere i se poate atasa atributul target='_blank' pentru ca link-ul sa se deschida intr-o noua pagina.
Exemplu:
Trimite un email la WebMaster!
Sursa:
Trimite un email la <a href='mailto:emgos_@hotmail.com' target='_blank'>WebMaster</a>!

Imagini

Poti adauga paginii tale de web imagini, atata timp cat acestea sunt in format .gif, .jpg, .jpeg. Nu se poate folosi formatul .bmp! Tagul pentru a adauga o imagine este <img src='locatie'>. Este recomandat adaugarea atributelor height si width, acestea permitand imaginii sa aiba diferite dimensiuni. Este de asemenea recomandat folosirea atributului alt='descrierea imaginii', acesta in momentul suprapunerii cursorului mouse-ului cu imaginea indica descrierea imaginii. Tagul pentru adaugare imagine nu are si un tag de inchidere!

Exemplu:

Sursa:
<img src='masina.jpg' width=200 height=100 alt='ferrari'>

Daca imaginea este in acelasi director cu documentul HTML, atunci folosesti numele imaginii(ex:masina.jpg). Daca imaginea se gaseste intr-un alt director, atunci folosesti director/masina.jpg

Imagini link

Poate iti doresti sa ai o imagine link, asta insemnand ca in momentul unui click pe imagine esti trimis la o alta pagina. Acesta este un lucru simplu de facut, intre tagurile de adaugare link se pune tagul de adaugare imagine(<a href='url-ul link-ului'><img src='locatia imaginii'></a>. Se poate folosi si atributul de aliniere in pagina align!

Exemplu:

Sursa:
<a href='https://www.autosite.ro' target='_blank'><img src='masina.jpg' width=200 height=100 > </a>

Capitolul 6(Mai multe taguri uzuale)

Tagul CENTER si tagul DIV

Tagul center are ca actiune centrarea lucrurilor intr-o pagina. Tagul de deschidere este <center>, iar tagul de inchidere este </center>. Tot ceea ce este cuprins intre aceste doua taguri va fi centrat in pagina(adica va aparea pe centrul paginii).

Exemplu:

Te iubesc Ema!

Sursa:
<center><h2>Te iubesc Ema!</h2></center>

Nota: W3C(grupul care decide standardele HTML) recomanda folosirea <div align='center'>text centrat</div> in locul tagului <center>,desi div nu functioneaza in browsere vechi. Avantajul folosirii tagului div este ca poti alinia lucrurile in pagina la stanga, pe centru si la dreapta prin folosirea atributului align

Atribute BODY

Tagul <body> are multe atribute..in urmatoarele randuri sunt cele mai folositoare..

background='locatia imaginii' = Pune o imagine ca fundal al unei pagini web.
bgcolor='#cod hexadeciaml' = Pune o culoare ca fundal.
link='#cod hexadeciaml' = Pune o culoare pentru link.
vlink='#cod hexadecimal' = Pune o culoare pentru linkurile deja vizitate.
text='#cod hexadecimal' = Pune o culoare pentru text.

Cod hexadecimal

Exista 16.7 milioane de culori diferite in sistemul de culori hexadecimal, incepand de la #FFFFFF care este alb, pana la #000000 care este negru.
Fiecare cod hexadecimal este impartit in 3 grupe:
- #XXxxxx - Tenta de rosu
- #xxXXxx - Tenta de verde
- #xxxxXX - Tenta de albastru
Fiecare unitate(x) este o valoare intre 0 si F in sistemul de culori hexadecimal. Sistemul de culori hexadecimal consta in unitatile 0 1 2 3 4 5 6 7 8 9 A B C D E F, 0 fiind valoare nula, iar F valoarea cea mai mare.
Daca primele doua unitati (adica tenta de rosu) sunt FF (cea mai mare valoare), iar restul de patru sunt 0 (nul) atunci culoarea va fi rosu curat.
Daca cele doua unitati din mijloc (adica tenta de verde) sunt FF (cea mai mare valoare), iar restul sunt 0 (nul) atunci culoarea va fi verde curat.
Daca ultimele doua unitati (adica tenta de albastru) sunt FF (cea mai mare valoare), iar restul sunt 0 (nul) atunci culoarea va fi albastru curat.
Incercati sa combinati diferite culori pana cand ajungeti la cea dorita plecand de la cele 3 culori de baza.

Capitolul 7(Codul curat, comentarii)

Cod HTML curat

Codul curat intr-un document HTML inseamna ca acesta sa urmeze toate specificatiile.
In urmatoarele randuri va prezint cateva mijloace da a va pastra codul HTML curat:

Nu scrie caracterele speciale in cod, foloseste codul de scaparemulte caractere nu trebuiesc scrise in codul HTMLde exemplu '<', '>', '©', '&' si chiar '. Codurile de scapare pentru aceste cinci caractere mai jos:
- pentru < inlocuiti cu < -
- pentru > inlocuiti cu > -
- pentru © inlocuiti cu © -
- pentru & inlocuiti cu & -
- pentru ' inlocuiti cu " -

Foloseste ghilimele pentru valorile din atributeDe exemplu, pentru o linie orizontala care este jumatate din lungimea paginii, scrie mai bine <hr width='50%'> decat <hr width=50%>.

Nu suprapune tagurileSuprapunerile apar in momentul cand Tagul 1 incepe, Tagul 2 incepe, Tagul 1 se inchide, apoi Tagul 2 se inchide. Aceasta va crea erori in unele browser-ele mai delicate.Exemplu:
- Tagurile se suprapun:
<h3><i>Caut sponsori pentru un nou sit web.</h3></i>

- Tagurile nu se suprapun:
<h3><i>Caut sponsori pentru un nou sit web.</i></h3>

Tagul de comentarii

In momentul scrierii unui document HTML, cateodata vei dori sa pui scurte notite pentru a putea interpreta mai bine codul HTML; in acelasi timp nu iti doresti ca acele notite sa apara pe browser. Pentru aceasta exista tagul de comentarii care se deschide cu , tot ce este cuprins intre cele doua taguri nu va aparea in pagina ci doar in codul HTML.

Capitolul 8(Liste ordonate, liste de definitii)

Lista neordonata

Lista neordonata sau mai clar nenumerotata este prima din cele trei tipruri de liste din acest capitol. Acest gen de lista este probabil cea mai uzuala.

Exemplu de lista nenumerotata

monitor
modem
unitate
mouse
tastatura

Sursa:(remarcati bulina dinaintea obiectului)

<ul>
<li>monitor
<li>modem
<li>unitate
<li>mouse
<li>tastatura
</ul>

Intre tagul <ul> si </ul> se trece lista de obiecte, fiecare obiect avand in frunte tagul <li>. Nu exista limita pentru obiectele din lista.

Lista ordonata

Lista ordonata cunoscuta si sub denumirea de lista numerotata este asemanatoare ca structura listei nenumerotate, exceptia constand in inlocuirea bulinei din fata obiectului cu un numar. Tagul de deschidere pentru lista ordonata este <ol>, iar cel de inchidere este </ol>. Fiecare obiect din lista va avea in continuare acelasi tag <li>.

Exemplu de lista numerotata

monitor
modem
unitate
mouse
tastatura

Sursa:(remarcati numarul dinaintea obiectului)
<ol>
<li>monitor
<li>modem
<li>unitate
<li>mouse
<li>tastatura
</ol>

Lista de definitii

O lista care v-ar putea fi folositoareoarecum. Este putin mai complicata in structura dar foarte usor de folosit. Aceasta lista are ca tag de deschidere <dl>, iar tag de inchidere este </dl>. In aceasta lista mai intalnim inca doua taguri: <dt> - termenul listei de definitie; si <dd> pentru definitia termenului.

monitor

Terminal al calculatorului pentru afisarea video a informatiilor prelucrate.

modem

Dispozitiv periferic care permite calculatoarelor sa receptioneze semnalele.

tastatura

Totalitatea butoanele care servesc la comanda masinilor de scris, de calculat

Sursa:
<dl>
<dt>monitor
<dd>Terminal al calculatorului pentru afisarea video a informatiilor prelucrate.
<dt>modem
<dd>Dispozitiv periferic care permite calculatoarelor sa receptioneze semnalele.
<dt>tastatura
<dd>Totalitatea butoanele care servesc la comanda masinilor de scris, de calculat.

Capitolul 9(Fonturi(Verdana,Arial) si culoarea textului)

Fonturile Verdana, Arial

Noile versiuni ale browser-elor suporta fonturi de genul Verdana, Arial, astfel stilul fontului fiind diferit de cel normal. Aceasta schimbare de font se poate realiza prin adaugarea atributului face='nume_font' la tagul <font>. Cele mai folosite fonturi sunt Verdana, Arial, Helvetica, Impact, Comic Sans MS, si inca cateva. Nu se recomanda ca textul paginii sa fie dependent de aceste fonturi deoarece unele browsere mai vechi nu le suporta inca.

Exemple:
Verdana
<font size=+2 face='Verdana'>Verdana</font>
Arial
<font size=+2 face='Arial'>Arial</font>
Helvetica
<font size=+2 face='Helvetica'>Helvetica</font>
Impact
<font size=+2 face='Impact'>Impact</font>
Comic Sans MS
<font size=+2 face='Comic Sans MS'>Comic Sans MS</font>

Nota:Daca nu vezi unul sau mai multe fonturi din cele de mai sus, atunci browser-ul tau probabil nu le suporta.

Culoarea textului

Se poate schimba culoarea textului prin adaugarea atributului color='culoarea_fontului' la tagul <font>. Culoarea este setatata prin introducerea codului din sistemul de culori hexadecimal, dar de asemenea se poate seta in browser-ele noi doar prin introducerea numelui culorii in engleza.

Exemplu de text colorat:
Nu imi place sa merg la concerte!
<font size=+2 face='Impact' color='green'>Nu imi place sa merg la concerte!</font>

Capitolul 10(Navigarea intr-un document si structura link-urilor)

Navigarea intr-un document

Este foarte folositor sa adaugi un link intr-o pagina iar atunci cand dai click pe el sa fii trimis in alta arie a paginii. Pentru aceasta se foloseste tagul deja invatat <a href>, diferenta fiind ca in locul adresei paginei se va folosi semnul # precedat de un nume pe care il va primi o anumita arie a paginei. Pentru a denumi aria paginei dorite, mergi la aria respectiva, si adaugi tagul <a name='numele_ariei'>textul din arie</a>, apoi pentru a pune un link catre acel loc foloseste <a href='#numele_ariei'>textul link</a>

Exemplu:
<a href='#section2'>Mergi la sectiunea 2</a>
blah
blah
blah
blah
<a name='section2'>Ai ajuns la sectiunea 2!</a>

Mergi la sectiunea 2
blah
blah
blah
blah
Ai ajuns la sectiunea 2!

Structurarea link-urilor

Pentru inceput este cel mai bine ca toate documentele HTML, imaginile si alte fisiere sa se afle in acelasi director. Astfel, cand pui linkuri intre documente nu trebuie sa introduci toata locatia documentului, ci doar denumirea. Ex: <a href='nume_document'></a>
Exemplu:- ai doua pagini, una 'index.html', iar a doua 'reclama.html'
https://www.nume_domeniu.ro/index.html
https://www.nume_domeniu.ro/reclama.html

Daca vrei sa adaugi un link de la pagina index.html catre pagina reclama.html, tot ce trebuie sa faci este sa adaugi tagul <a href='reclama.html'>Pagina de reclama</a>. Daca vrei sa pui un link de la pagina reclama.html catre pagina index.html, folosesti <a href='index.html'>Pagina principala</a>.

Pentru o mai buna aranjare a documentelor pe server este nevoie de directori, aici lucrurile devin putin mai provocatoare. Sa zicem ca fratele tau vrea sa isi construieasca o pagina, dar nu vrei ca documentele tale sa se amestece cu ale lui, atunci creeaza un director. Exemplu:avem pagina index.html, reclama.html si directorul denumit BOGDAN in care se gaseste un alt document index.html
https://www.nume_domeniu.ro/index.html
https://www.nume_domeniu.ro/reclama.html
https://www.nume_domeniu.ro/BOGDAN/index.html
Pe pagina ta index.html, vrei un link catre pagina index.html a fratelui tau din directorul BOGDAN. Cea mai comuna cale de a face acest lucru este prin URL:
<a href='https://www.nume_domeniu.ro/BOGDAN/index.html'>Pagina fratelui meu!</a>
Sau:fara URL
<a href='Bogdan/index.html'>Pagina fratelui meu!</a>

Acum pe pagina fratelui tau vrei un link catre pagina ta index.html. Deoarece pagina ta este inaintea directorului fratelui tau vei folosi ../ sau adresa de url.
Exemplu:
<a href='../index.html'>Pagina principala</a>
Sau:
<a href='https://www.nume_domeniu.ro/index.html'>Pagina principala</a>

Capitolul 11(Drepturi de autor si de copiere)

Drepturile de autor si de copiere

Legile asupra copierii se aplica pe Internet la fel ca in restul domeniului media. Creatorul unei pagini web originale are drepturi de autor asupra acelei pagini si sunt notate cu semnul ©. Paginile care nu au semnul © este de retinut ca pot fi protejate de lege. Toate imaginile, icoanele, butoanele pot fi sub drepturi de autor. Pentru a le folosi trebuie sa ai permisiunea autorului.
Lucruri pe care le poti face (legale):

Scrie pagini originale, creeaza grafice, si cere drepturi de autor.
Pune link catre o alta pagina care nu iti apartine, atata timp cat nu sustii ca este a ta.
Foloseste grafice care sunt notate ca fiind gratis.
Foloseste graficele altcuiva cu permisunea lui.
Expune parerea despre alte pagini web fara sa copii materialul din acele pagini.

Lucruri pe care nu le poti face (ilegale):

Sa iei pagina altcuiva si sa o folosesti nemodificata.
Sa iei pagina altcuiva, sa o modifici si sa ceri drepturi de autor.
Sa iei graficele altcuiva si sa le folosesti in pagina ta.
Sa iei materialele asupra carora sunt drepturi de autor fara permisiunea autorului.
Probabil ca mai sunt cateva, dar acestea sunt mai importante.

Alinierea imaginilor cu textul

Daca incarci o imagine fara un atribut de aliniere aceasta iti va permite scrierea in dreptul ei a unui singur rand de text.
Exemplu:
Aceasta masina este un Ferrari.
Va place?
Sursa:
<img src='masina.jpg' width=200 weight=150>Aceasta masina este un Ferrari.<br>Va place?

Daca vrei ca textul sa fie in dreptul imaginii atunci folosesti atributul align.
Exemplu:
Aceasta masina este un Ferrari.
Va place?
Sursa:
<img src='masina.jpg' align=left width=200 weight=150>Aceasta masina este un Ferrari.<br>Va place?
Observati ca tot textul ce urmeaza dupa atasarea pozei va fi scris in dreptul acesteia. Acest lucru se poate evita folosind tagul < br clear=all>, citind Capitolul 12.

Capitolul 12(Mai multe despre grafica)

Folosirea <br clear=all>

Cand folosesti atributul align cu imaginile vei observa ca tot textul ce precedeaza imaginea se va gasi pe toata inaltimea imaginii. Pentru ca textul sa nu fie in dreptul imaginii folosesti tagul <br clear=all>.
Exemplu:
Aceasta masina este un Ferrari.
Va place?

Text nedorit in dreptul imaginii.

Sursa:
<img src='masina.jpg' align=left width=200 weight=150>Aceasta masina este un Ferrari.<br>Va place?
<br clear=all>Text nedorit in dreptul imaginii.

Acest tag este folositor si in alte cazuri, cum ar fi cand iti doresti ca o linie orizontala sa fie sub imagine si nu in dreptul ei.
Exemplu:
Aceasta masina este un Ferrari.
Va place?

Sursa:
<img src='masina.jpg' align=left width=200 weight=150>Aceasta masina este un Ferrari.<br>Va place?
<br clear=all><hr>

Capitolul 13(Tabele, Tabele)

Tabele

Exemplu de tabel:

La ce sunt bune tabelele?

Tabelele sunt facute pentru a face informatia mai usor de interpretat si se pot considera chiar grafice.

Sursa:
<table border=3>
<tr>
<th>La ce sunt bune tabelele?</th>
</tr>
<tr>
<td>Tabelele sunt facute pentru a face informatia mai usor de interpretat si se pot considera chiar grafice.</td>
</tr>
</table>

Tabelele sunt unele dintre cele mai provocatoare lucruri din codul HTML. Nu sunt greu de folosit, doar ca au un cod mai lung si necesita mai multa atentie. Tabelele incep cu tagul <table> care de obicei contine atributul border=n si se inchide cu tagul </table>. Daca atributul border are valoarea n=0 atunci marginea tabelei este invizibila.
Fiecare rand din tabela este definit de tagul <tr>.In fiecare rand al tabelului se gasesc casute, care sunt definite prin tagurile <td> si </td>. De multe ori, vei avea nevoie de un titlu al coloanei care se va afla pe primul rand, pentru aceasta se foloseste <th> si </th>. Tagul de introducere titlul coloanei face textul bold si centrat.

Exemplu de tabela cu mai multe randuri si coloane:

Titlu 1	Titlu 2	Titlu 3
Casuta A	Casuta B	Casuta C
Casuta D	Casuta E	Casuta F

Sursa:
<table border=2>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
<td>Casuta A</td><td>Casuta B</td><td>Casuta C</td>
</tr>
<tr>
<td>Casuta D</td><td>Casuta E</td><td>Casuta F</td>
</tr>
</table>

Introducerea atributului rowspan='n.
' Exemplu:

Titlu 1	Titlu 2	Titlu 3
Casuta A & D	Casuta B	Casuta C
Casuta A & D	Casuta E	Casuta F

Sursa:
<table border=2>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
<td rowspan='2>Casuta' A & D</td><td>Casuta B</td><td>Casuta C</td>
</tr>
<tr>
<td>Casuta E</td><td>Casuta F</td>
</tr>
</table>

Se remarca adaugarea atributului rowspan='2' tagului <td>. Acest atribut a permis acelei casute sa se intinda pe doua randuri. Daca vrei ca o casuta sa se intinda pe n coloane adauga atributul colspan=n. Pentru schimbarea pozitiei textului pe orizontala in casuta se foloseste atributul align=left/center/right. Pentru schimbarea pozitiei textului pe verticala se foloseste atributul valign=top/middle/bottom.

Capitolul 14(Adaugarea de sunete)

Adauga sunete

Pentru adaugarea de sunete unei pagini de web se foloseste tagul <embed>. Acest tag supota extensii de genul .wav, .mp3, .au, .midi.

Structura de baza a acestui tag:

<embed src='nume_sunet' width=n height=n autoplay=n hidden=n loop=n volume=n></embed>

Daca vrei ca sunetul sa inceapa automat la deschiderea paginii seteaza autoplay=true, daca nu vrei ca sunetul sa inceapa automat seteaza autoplay=false. Daca nu vrei ca player-ul sa apara in pagina seteaza hidden=true. Daca vrei ca sunetul sa se auda in mod repetat seteaza loop=true. Volumul se seteaza pe o scara de la 1 la 100 (50 fiind valoarea predefinita).

Exemplu:

Nota: Deoarece acest tag nu are atributul autoplay=true este necesar a apasa play.
Sursa:
<embed src='engine.wav' autoplay=false></embed>

Contact \|- ia legatura cu noi -\|
Adauga document \|- pune-ti documente online -\|
Termeni & conditii de utilizare \|- politica de cookies si de confidentialitate -\|
Copyright © \|- 2024 - Toate drepturile rezervate -\|