Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Introduce Re HTML

    Încărcat de

    Alexi Scurtu
    23 vizualizări9 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

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

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

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

    Introduce Re HTML

    Încărcat de

    Alexi Scurtu

    Drepturi de autor:

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

    NOIUNI INTRODUCTIVE N HTML

    HTML-este , n esen, un limbaj prin care se descrie modul n care va arat o pagin web(textul,imaginile i poziiile lor). Fiierele HTML au extensia .html sau .htm Prin site- se nelege ansamblul: spaiu pe hard+fiierele pe care le conine+adresa (de Interne)t. n vorbirea curent prin pagin web nelegem coninutul afiat al unui fiier HTML. Etapele pentru crearea unui fiier html: E1. Vizualizai cu My Computer folder-ul unde dorii s se gseasc fiierul E2.Apelm din meniul flotant (click cu butonul drept al mouse-ului)i alegem New i Text Document. Programul Notepad va crea un fiier cu extensia .txt

    E3. Modificai numele i extensia fiierului. V poziionai pe fiierul creat,apsai butonul drept al mouse-ului i alegei Rename,nlocuii cu numele dorit, iar extensia s fie .html. Fiierul creat va avea de aceast dat icon-ul browser-ului (Internet Explorer). 1

    Exemplu: index.html

    E4. Executai dublu click asupra icon-uluim, care va lansa browser-ul.Evident n aceast faz coninutul su este vid E5. Apelai View i Source. Notepad-ul va ncrca codul html al fiierului(evident coninutul este vid)

    E6. Scriei un text la alegerea dvs.Exemplu: Acesta este un test html.Salvai-l

    E7. n fereastra browser-ului apsai butonul Refresh.Prin aceast operaie comandm browser-ului s rencarce fiierul ,pentru c i-am schimbat coninutul.Textul va fi afiat de browser. Observaie:de fiecare dat cnd dorii s vizualizai efectul modificrilor ,apsai Refresh.

    Din acest moment putem scrie codul html .Din cnd n cnd ,vizualizm pentru a vedea efectul i a corecta eventualele erori => Refresh.

    Exerciiu: deschidei o pagin de Internet i vizualizai codul html. (pagina va fi aleas de dvs.) (View i Source)

    HTML Codul HTML,este format din directive (tag-uri). Fiecare tag ,are un anumit efect i este ncadrat ntre paranteze unghiulare < >. - Orice pagin ncepe cu tag-ul <HTML>i se termin cu tag-ul </HTML> - O pagin conine un antet (HEAD) i corpul propriu zis (BODY) - Antetul este cuprins ntre directivele <HEAD> i </HEAD> - Corpul propriu zis este coninut ntre directivele <BODY> i < /BODY>.Corpul poate conine texte i/sau imagini - Opional, antetul poate conine titlul paginii cuprins ntre directivele <TITLE> i </TITLE>Titlul apare pe bara de titlu a ferestrei afiat de Internet Explorer(pentru noi Exemplu html )

    1. Structura de baz a unei pagini web


    <HTML> <HEAD> <TITLE> Exemplu html </TITLE> </HEAD> <BODY> Acesta este un exemplu de creare a unei pagini web </BODY> </HTML> Efectul codului de mai sus va fi

    2. Introducerea textelor
    n exemplul de mai sus textul era alctuit dintr-un singur paragraf,dar,n general,textele coninute de o pagin se pot gsi n mai multe paragrafe.Pentru a delimita un paragraf se vor folosi tag-urile : 3

    <P atribute >coninut paragraf </P>. atributele paragrafelor : * Align-controleaz alinierea paragrafelor.Poate lua una din valorile: - Center-aliniat la centru - Left-aliniat stnga - Rigth-aliniat dreapta - Justify-aliniat la ambele margini Exemplu : <BODY> <P align =center> text dorit </P> <P align = rigth> alt text.. </P> </BODY> efectul va fi

    Obs. - Atunci cnd sunt afiate,paragrafele sunt separate printr-o linie vid ; - Tag-ul </P> poate lipsi.Un nou paragraf poate fi depistat prin tag-ul <P> ; - n html apsarea tastei Enter nu are nici-un efect ; - Fr o alt comand, un rnd al unui paragraf are limea ferestrei afiat de browser.Dac micorm fereastra browser-ului acelai paragraf va ocupa mai multe rnduri - Dac 2 cuvinte ale unui paragraf sunt separate prin mai multe spaii,browser-ul afieaz doar un singur spaiu Alte elemente care permit formatarea paragrafelor - Elementul BR- are ca efect forarea afirii a ceea ce urmeaz pe rndul urmtor. Exemplu: <BODY> <P align =center> Cursul este foarte interesant<BR>dar volumul informational este prea mare </P> <P align = rigth> alt text.. </P> </BODY> 4

    Elementul B-are rolul de a afia bold(ngroat).Textul este cuprins ntre <B> i</B> - Elementul I-are rolul de a afia italic(nclinat). Textul este cuprins ntre <I> i</I> - Elementul U-are rolul de a afia subliniat. Textul este cuprins ntre <U> i</U> - Elementul FONT are atributele : - Face-indic fontul (Arial,.) - Size-indic mrimea (ntre 1 i 7) - Color-indic culoarea (black,red,green,blue,yellow,olive,teal(albastru spre verde ) ,maroon , white,purple,sylver(argintiu),lime(vernil),navy(bleumarin)) - Elementul STRONG-are rolul de a atrage atenia cititorului(o alt modalitate de a scrie bold). Textul este cuprins ntre <STRONG> i</STRONG> - Elementul BIG textul s fie scris mai mare dect restul textului. Textul este cuprins ntre <BIG> i</BIG> - Elementul SMALL-textul s fie scris mai mic- ntre <SMALL> i</SMALL> - Elementul SUP-textul s fie scris ca o putere- ntre <SUP> i</SUP> - Elementul SUB-textul s fie scris ca un indice ntre <SUB> i</SUB> - Pentru scrierea titlurilor se utilizeaz elementele H1,H2H6.Fiecare titlu este scris ntre tag-urile <H1> </H1>.Mrimea difer:pentru H1-dimensiune maxim. H6-dimensiune minim Exemplu: <HTML> <HEAD> <TITLE> Exemplu html </TITLE> </HEAD> <BODY> <BODY> <H1 align=center > Curs de initiere HTML </H1> <FONT face=ARIAL size=4 color =green> Cursul este interesant<BR>dar volumul informational este prea mare </FONT> <P align= center > exemplu pentru scrierea la putere </P> <P align= center > 4*x <SUP > 3 </SUP> </P> <P align= center > exemplu pentru scrierea ca indice </P> <P align= center > 4*x <SUB > 3 </SUB> </P> </BODY> </HTML>

    foarte

    Pentru a stabili acelai mod de aliniere pentru mai multe paragrafe,trebuie s le grupm ntr-un singur bloc,utiliznd tag-urile <DIV>.. </DIV>: Exemplu: <div align=right> <p>primul paragraf <p>al doilea paragraf <P>observati alinierea paragrafului </div>

    3. Liste

    n html exist posibilitatea ca anumite enunuri s fie numerotate sau marcate ntr-un anumit fel.O astfel de organizare poart numele de list. Exist 3 tipuri de liste: - Ordonate- numerotate 1,2,3;a.,b;i.,ii.,iii.A.,B..<OL type = >.</OL> - Neordonate- utilizeaz anumii marcatori (square),(circle),(disc),<UL type=></UL> - De tip definiie <DL></DL>, pentru termenii din list <DT> </DT> ,pentru descrierea termenilor<DD>...</DD> Pentru a descrie un termen al listei ordonate i neordonate se va fi folosit tagul <LI></LI> Exemplu : <HTML> <HEAD> <TITLE> Exemplu html </TITLE> </HEAD> <BODY> 6

    <BODY> <H1 align=center > Curs de initiere HTML </H1> <FONT face=ARIAL size=6 color =red> exemplu pentru descrierea listelor</FONT> <OL type=I> <LI>lista ordonata combinata cu lista neordonata <UL type=square> <LI>varianta A <LI>varianta B <LI>varianta C </UL> <LI> lista ordonata combinata cu lista neordonata <UL type=circle> <LI>varianta A <LI>varianta B <LI>varianta C </UL> </OL> </BODY> </HTML>

    Liste de tip definiie <DL> <DT>un termen<DD>descrierea termenului <DT>alt termen<DD>descrierea termenului </DL>

    4.Ataarea imaginilor
    Elementul IMG se utilizeaz pentru a ataa unei pagini o imagine(img-nu admite etichet de sfrit,prin urmare nu are coninut). 7

    Forma general <IMG atribute> unde atribute sunt: - src- identific fiierul care conine imaginea respectiv(de tip .jpg , .gif). Dac fiierul se va gsi ntr-un folder oarecare, atunci va trebui specificat i calea unde se afl; - align- tipul de aliniere(modul n care va alinia imaginea n raport cu textul)-reine una din valorile :right(dreapta),left(stnga),top(sus),middle(centru),bott om(jos) - alt-text(semnific un text alternativ,care va fi afiat de browser-cele care nu pot vizualiza imagini) - height-definete nlimea imaginii n pixeli - width-definete limea imaginii <HTML> <HEAD> <TITLE> Exemplu html </TITLE> </HEAD> <BODY> <H1 align=center > Curs de initiere HTML </H1> <FONT face=ARIAL size=3 color =blue> exemplu pentru inserarea unei imagini</FONT> <P><IMG src="cori.jpg" align="left" hspace="20" height="180" width="180" >Corina Negrea clasa a XI-a Colegiul National Tudor Vladimirescu Tg-Jiu </P> <P>observati alinierea paragrafului </P> </BODY> </HTML>

    5. Legturi(link-uri)- modalitatea de a lega paginile web ntre ele


    Hiperlegturile se creeaz cu ajutorul ancorelor.Elementul <a atribute >(ancor)..</a>.Textul cuprins ntre cele dou etichete va aprea evideniat(colorat,subliniat)n fereastra browser-ului,n funcie de valorile atributelor sau n funcie de valorile de configurare a browser-ului Atribute: - href- URL-calea spre legtur-legturi cu alte pagini web; (Ex: 1. <a href=http://www.portal.edu.ro>Vizitati acest site al Ministerului </a> 2. <address> <a href=mailto:xxxx@yahoo.com>mesaj </a> </address> pentru trimiterea automat a unui mail 3. <a href="filmulet.avi">filmulet(fisier.avi)</a> 4. <a href="cargo.mp3">muzicuta(fisier.mp3)</a> -fiierul poate fi i pe un anumit site,dar, din pcate, se pierde prea mult timp cu transferul fiierului pe calculatorul vizitatorului .Acesta este motivul pentru care diversele site-uri conin mai puine fiiere de sunet sau de sunet i imagini - name-ir de caractere(asociaz un nume ancorei curente,astfel nct s poat constitui inta(target)unui alt link) 8

    title-ir de caractere(asociaz un nume resursei la care se face legtura)

    6. Inserarea tabelelor
    - elementul TABLE descrie un tabel.< TABLE>.</ TABLE> - elementul TR-descrie o linie a tabelului.< TR>.</ TR>(optional) - elementul TD-descrie o celul a tabelului.< TD>.</ TD>(optional) Exemplu: <table border="5"> <tr> <td>text</td> <td>o linie care ocupa mai mult spatiu </td> </tr> <td>prima celula din linia 2</td> <td>a doua celula din linia 2</td> </tr> <table>

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