Pentru A Adauga Imagini in Corpul Paginilor HTML Vom Utiliza Elementul

Pentru a adauga imagini in corpul paginilor HTML vom utiliza elementul <img>.
<img src="cale_fisier_imagine" alt="text_descriptiv" width=nr_pixeli height=nr_pixeli vspace=nr_pixeli hspace=nr_pixeli align= top | middle | base | bottom | left | right border=nr_pixeli> unde src (source) reprezinta referinta catre fisierul imagine propriu-zis (ex. src="http://www.uaic.ro/site/wwwuaic/logo_ro_bej.gif"), alt va afisa un text explicativ de tip sfat sau tooltip la plasarea cursorului peste imagine, width stabileste latimea imaginii, height fixeaza inaltimea imaginii, hspace si vspace ofera distanta in pixeli fata de continutul inconjurator pe verticala, respectiv pe orizontala, border contureaza imaginea. Mod de lucru online: Pentru a gasi imagini in Internet puteti folosi Google -> Images. Deindata ce ati gasit imaginea dorita, dati clic dreapta, alegeti 'Properties' si copiati referinta http din caseta informativa. Puteti alege si sa salvati imaginea pe computerul propriu in acelasi director cu fisierul HTML, caz in care src devine simplu "fisier_imagine". Mod de lucru offline: Cautati imagini pe computerul local si copiati-le in directorul fisierului HTML. Adresati atributul src prin valoarea "fisier_imagine". Pentru particularizarea de ansamblu a aspectului paginii HTML (culoare sau imagine fundal, culoare implicita a textului si a linkurilor) se utilizeaza atributele elementului body. <BODY bgcolor=nume_culoare_in_limba_engleza | valoare_hexa_culoare background="referinta_fisier_imagine" text=nume_culoare | valoare_hexa_culoare link=nume_culoare | valoare_hexa_culoare alink=nume_culoare | valoare_hexa_culoare vlink=nume_culoare | valoare_hexa_culoare> ... </BODY> unde bgcolor va fi culoarea intregului fundal al paginii, background va incarca o imagine ca fundal, text schimba culoarea implicita a textului din negru in noua culoare, link stabileste culoarea linkurilor nevizitate, alink fixeaza culoarea linkurilor la activare prin suprapozitionarea cursorului de mouse, vlink stabileste culoarea pentru linkuri deja vizitate. Tag-urile cele mai uzuale pentru formatarea caracterelor sunt: <B> ... </B> pentru scris boldit, ingrosat <I> ... <I> pentru transformare in italice <U> ... </U> pentru subliniere <SUP> ... </SUP> pentru scriere ca exponent <SUB> ... </SUB> pentru scriere ca indice <STRONG> ... </STRONG>, afisare ca bold marit <SMALL> ... </SMALL>, afisare in caractere mai mici <EM> ... </EM> (de la emphasis), afisare eleganta, italica <BIG> ... </BIG>, afisare in font marit cu un punct Web Trebuie precizat ca dimensiunea de referinta a fontului caracterelor intr-o pagina web este in
majoritatea browserelor de 12 puncte. Un subset al marcajelor pentru caractere il reprezinta tagurile de stiluri titlu. <H1 align="left | center | right"> ... </H1> <H2 align="left | center | right"> ... </H2> <H3 align="left | center | right"> ... </H3> <H4 align="left | center | right"> ... </H4> <H5 align="left | center | right"> ... </H5> <H6 align="left | center | right"> ... </H6> unde align este atribut (particularizeaza actiunea unui tag in afisarea unui element (fragment de continut HTML). | semnifica ideea de optiune (sau, sau). Implicit alinierea stilurilor titlu este la stanga. Important! Stilurile titlu afiseaza totdeauna caracterele pe rand nou, netrebuind sa fie precedate de vreun alt marcaj pentru aceasta. Observatie: Stilurile titlu sunt afisate identic si in alte aplicatii de prelucrare a textului, procesoare de text ori aplicatii de tehnoredactare complexe pentru tiparituri (MS Word, CorelDRAW, QuarkXPress). Cea mai complexa eticheta pentru formatarea caracterelor este eticheta <font>...</font>. Aceasta are definitia <font size=numar | +numar_de_puncte_marire_fata_12px_implicit | numar_de_puncte_micsorare_fata_12px_implicit color=nume_culoare | valoare hexazecimala face="lista_nume_fonturi_separate_prin_virgula"> ... </font> Ex. <font size=+2 color=blue face="Arial,Verdana,Courier">Text</font> Pentru a afla mai multe despre atributul de culoare, vezi topicul "Despre culori web". Un efect vizual de text se ob ine prin elementul <marquee>...</marquee>. Afla i mai multe despre acest tag la http://www.scit.wlv.ac.uk/encyc/marquee.html Toate etichetele de pana acum s-au axat pe formatarea caracterelor: ingrosare, marire, micsorare, colorare, inclinare etc. Sa vedem ce marcaje putem folosi pentru manipularea paragrafelor. Mai intai, paragraf in textul electronic (computerizat) se numeste orice sir de caractere (de la un singur spatiu si pana la mii de linii de text) care incepe pe rand nou si poate fi formatat unitar. Altfel spus, paragraf este orice text scris dupa o apasare de tasta ENTER. Paragraful text pe computer este aliniat exact de la stanga paginii. Cel mai simplu mod de a crea un paragraf este chiar tagul <P>, avand sintaxa <P align="left | center | right"> ...</P>, unde | semnifica alegerea unei optiuni (sau ..., sau ...). Daca nu se precizeaza atributul align, paragraful e aliniat implicit la stanga.
Ex. Creati un fisier denumit, cerere.html <html> <head><title>Cerere</title></head> <body> <font face="Verdana"><p align=center>Domnule director,</p> <p>Subsemnatul Nickname va rog sa-mi aprobati deplasarea in strainatate pentru a onora o bursa de studii de sase luni incepand cu data de 01.03.</p> <p align=right>Nickname</p> </body> </html> Totusi in exemplul de cerere, am fi dorit poate ca blocul de text sa fie usor deplasat spre dreapta pe primul rand (indentat), asa cum este un paragraf dintr-o pagina tiparita. Am putea marca respectivul paragraf prin tagul bloc de text <blockquote> </blockquote>. Un tag similar celui paragraf (<P>), este <DIV>. <DIV align="left | center | right"> textul meu </DIV>. Acest tag este recomandat de tehnicieni pentru a inlocui tagul <p>, intrucat implementeaza mai bine mecanismul de formatare avansata CSS (Cascading Style Sheet - Foi de stil in cascada). Se foloseste la fel ca tagul <p>, eventual adaugand atributul style, care are ca valoare instructiuni CSS. Browserele (reluam o idee mentionata anterior) elimina din codul HTML spatiile, liniile albe, caracterele TAB sau ENTER, inlocuind spatiile multiple printr-un singur spatiu. Astfel codul HTML din Notepad: Text Alt Text va fi afisat in browser Text Alt Text Pentru a conserva diversele caractere non-alfanumerice in text (exact ca in tastarea originala), folosim tagul <pre>.
<PRE> Text </PRE> Un alt truc in HTML pentru a trimite continutul urmator pe rand nou este tagul unic linie orizontala, <HR> (horizontal rule, eng.). Definitie: <HR size=3 color=blue width=300 | 80% noshade align=left | center | right> unde, noshade semnifica absenta unei umbre discrete implicite (mai ales pentru linii colorate), size permite stabilirea grosimii liniei in pixeli (implicit, are valoarea 1, de grosimea caracterului de subliniere), width fiind numarul de pixeli latime (valoare absoluta, fixa) sau procent din latimea ferestrei browserului (valoare relativa, dependent de marimea ferestrei curente a utilizatorului). Un divizor de fragment de pagina HTML, care nu creaza paragrafe noi, este ruperea de rand, break. Este un tag unic, notat <br>. Ex. <P>Cu respect,<BR> Nickname</P>
Pentru a introduce o enumer ri ntr-o pagina HTML putem folosi liste. Pentru o enumerare finita (relativ scurta) de expresii este recomandata utilizarea listei ordonate. <ol type= 1 | a | A | i | I start=valoare_simbol compact> <li>item1</li> ... <li>item n</li> </OL unde type arata simbolul care va precede itemii listei, start da valoarea de start (4 sau c, de exemplu), compact reduce spatiul vertical dintre itemi. Pentru o enumerarea unui numar necunoscut de itemi se recomanda utilizarea listei neordonate. <ul type=disc | square | circle compact> <li> item 1 </li> ... <li> item n </li> </ul>
Realizati offline propriul Dv. document HTML, avand con inutul: [italic]Pagina personala - [bold]Prenume Nume[/bold] este momentan in constructie ![/italic] afi at n fereastra browserului. Copiati codul-sursa din corpul documentului (dintre deschidere-body si inchidere-body) ca interventie in acest forum.
Ancorele (hiperlegaturile) exprima esenta hipertextului, a web-ului in ansamblu, intrucat cu ajutorul lor designerul poate implementa si conduce navigarea vizitatorilor. Fara hiperlegaturi putem obtine cel mult pagini web izolate, in nici un caz situri web. Ancorele sunt descrise astfel: <a href=URL>text link</a> Href arata fragmentul de document sau documentul Web integral care urmeaza a fi incarcat prin referinta. URL (Universal Resource Locator) poate fi absolut cand contine o cale Web completa, ca de exemplu href="http://www.liis.ro/~socioumane/index.php" (util cand incarcam in pagina documente care nu exista pe server, ci oriunde in alta parte in Web) sau relativ, ca de exemplu href="contact.html" sau href="images/logo.gif" sau href="../parole.php". Atentie! La scrierea unui URL conteaza tipul de caractere (case-sensitive): http://www.liis.ro/contact.html si http://www.liis.ro/ConTaCt.HtML nu trimite in Web spre acelasi document. Exemplu: Pentru un sit am pregatit doua pagini web pentru sit: index.html si contact.html. In codul fisierului contact.html pot introduce o hiperlegatura catre pagina principala a sitului scolii, introducand <a href="http://www.liis.ro">Mergi la situl liceului</a>. Ultima modificare: mar i, 22 noiembrie 2011, 09:55
Pentru a adauga imagini in corpul paginilor HTML vom utiliza elementul <img>. <img src="cale_fisier_imagine" alt="text_descriptiv" width=nr_pixeli height=nr_pixeli vspace=nr_pixeli hspace=nr_pixeli align= top | middle | base | bottom | left | right border=nr_pixeli> unde src (source) reprezinta referinta catre fisierul imagine propriu-zis (ex. src="http://www.uaic.ro/site/wwwuaic/logo_ro_bej.gif"), alt va afisa un text explicativ de tip sfat sau tooltip la plasarea cursorului peste imagine, width stabileste latimea imaginii, height fixeaza inaltimea imaginii, hspace si vspace ofera distanta in pixeli fata de continutul inconjurator pe verticala, respectiv pe orizontala, border contureaza imaginea. Mod de lucru online: Pentru a gasi imagini in Internet puteti folosi Google -> Images. Deindata ce ati gasit imaginea dorita, dati clic dreapta, alegeti 'Properties' si copiati referinta http din caseta informativa. Puteti alege si sa salvati imaginea pe computerul propriu in acelasi director cu fisierul HTML, caz in care src devine simplu "fisier_imagine". Mod de lucru offline: Cautati imagini pe computerul local si copiati-le in directorul fisierului HTML. Adresati atributul src prin valoarea "fisier_imagine".
Realiza i dou fi iere HTML: index.html, contact.html. Insera i n index.html link spre pagina de contact i n contact.html link spre pagina index.html. PostaPentru mai multe detalii i exemple, recomand m pentru studiul HTML i nu numai urm toarele link-uri: http://www.w3schools.com/html/default.asp http://www.htmlhelp.com/reference/html40/ http://www.w3.org/TR/html4/ti codul celor doua fisiere aici, copiind sursa dintre <body> si </body>).
Intrebare: Am deschis Notepad, am salvat un fisier, insa cand il lansez de pe discul local documentul nu se deschide in browser. Ce se intampla? Raspuns: Verificati extensia fisierului salvat. Daca este cazul, deschideti documentul in Notepad, redenumiti-l (Save as...) avand grija sa alegeti ALL FILES ca optiune Save as Type din caseta de dialog Save, pentru a obtine fisier de forma 'nume_fisier.html' Intrebare: Am scris codul fisierului html in Notepad, am salvat, iar cand actualizez pagina in Internet Explorer nu se incarca absolut nimic, nici macar titlul paginii. Ce se intampla? Raspuns: Verificati cu mare atentie codul HTML in Notepad pentru a nu se fi strecurat o greseala intre <head> si </head>, orice eroare in antetul paginii blocand afisarea ei in browser. Intrebare: Am schimbat formatul unui text, insa toata pagina pana la final a pastrat acelasi format. Ce se intampla? Raspuns: Ati uitat sa inchideti un element; verificati tagurile de inchidere din locul unde urma sa se intrerupa formPentru a inhiba afisarea in browser a unui cod ori pentru precizarea scopului codului, putem comenta codul prin incadrarea secventelor HTML intre expresiile  Astfel, codul <!-nu am siguranta corectitudinii acestui cod <P align="justify">Text justificat</P> --> nu va fi afisat in browser. Utilitate: 1. Pentru a explica secvente de cod si altor dezvoltatori, mai ales pentru lucrul in echipa. 2. Pentru a testa diverse portiuni de cod. Ex. nu stiu cat de repede livreaza pagini bogate in grafica un
anume server. In acelasi fisier, pot scrie cod pentru o pagina cu grafica putina, respectiv pentru grafica masiva (fundal, baner, pictograme etc.). Verific ulterior incarcarea paginii in browser, (de)comentand corespunzator.atarea. In mod normal, browserul utilizeaza un set restrans de 128 de caractere dintr-un font pentru reprezentarea textului. Daca dorim inserarea oricarui caracter tastabil (caractere speciale, simboluri, diacritice, semne din HTML, precum <, >, ", & si altele), trebuie sa includem asa-numitele referinte entitate caracter. O astfel de entitate pentru a produce caracterul spatiu, care poate fi adaugata in cod, este Toate aceste referinte incep cu & si se termina prin ; Pentru consultarea listei complete a referintelor entitate caracter, vizitati http://www.htmlhelp.com/reference/html40/entities/latin1.html
Desi codul HTML este in esenta text simplu care se scrie in orice program de editarea a textului (Notepad - in Windows; Vim, Emacs - in Linux), pagina Web realizata, fie ea statica sau dinamica, poate incorpora imagini, animatii (filme fara sunet), sunete, videoclipuri, filme Flash, streaming Youtube ori similare etc. Editoare HTML:
y
text: gratuite: Notepad, ConText comerciale: UltraEdit, EditPlus vizuale: o gratuite: NVu, HTMLKit o comerciale: Adobe Dreamweaver, Microsoft FrontPage
o o
Editoare foto:
y
gratuite: PaintBrush (disponibil in Windows->Accesories), IrfanView, PhotoScape; FotoFlexer (editor online free disponibil la

Pentru A Adauga Imagini in Corpul Paginilor HTML Vom Utiliza Elementul

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Pentru A Adauga Imagini in Corpul Paginilor HTML Vom Utiliza Elementul

Încărcat de

Drepturi de autor:

Formate disponibile

Pentru a adauga imagini in corpul paginilor HTML vom utiliza elementul <img>.

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