Jump to content

Search the Community

Showing results for tags 'HTML'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • INFORMATII GENERALE
    • Anunturi si Informatii Generale - Comunitatea Rangfort
    • Server Management
    • Member management
  • GAMING - Servere publice
    • TeamSpeak 3
    • COUNTER-STRIKE 1.6
  • GAMING - Mixuri, cupe, competitii,clanuri
  • SUPORT TEHNIC
    • ZONA IT
    • AMX MOD X
    • DESIGN
  • TIMP LIBER - DIVERSE
    • GAMING
    • STEAM
    • SOCIAL
    • Magazin online
    • International Forum

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Steam


Skype:


E-mail


City:


Interests


Age

Between and

Steam ID

Found 25 results

  1. Pentru a obţine textul îngroşat vom folosi tagul bold: Acest text este bold Afişare Acest text este bold Text îngroşat - Aplicaţii În general textul îngroşat se foloseşte pentru a scoate în evidenţă anumite cuvinte sau anumiţi termeni în interiorul unei fraze. Textul îngroşat este util pentru a scoate în evidenţă anumiţi termeni Afişare Textul îngroşat este util pentru a scoate în evidenţă anumiţi termeni Se poate folosi deasemena pentru scrierea tip definiţie. Dar mai bine să exemplificăm. Bold - Cuvântul corespondent în engleză pentru îngroşat, deasemena poate însemna, viteaz. " Afişare Bold - Cuvântul corespondent în engleză pentru îngroşat, deasemenea poate însemană, viteaz
  2. Tagul div este nu este altceva decât un suport pentru alte taguri. Iată câteva atribute ale acestui tag: - id - title - style - height - width Restul atributelor nu se folosesc în general funcţiile lor fiind cedate CSS-ului. Iată şi un exemplu de folosire a tagului : <div id="menu" align="right" > <a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Titlu Aici </h5> <p>Iar aici va fi şi conţinutul paragrafului.</p> </div> Vizualizare Iar aici va fi şi conţinutul paragrafului. Iar aici va fi şi conţinutul paragrafului. Iar aici va fi şi conţinutul paragrafului. Tagul div este mult mai uşor de folosit decât tagul table, de aceea este recomandabil şi preferabil, folosirea lui ori de câte ori este nevoie. <2>Tagul Div - uşurinţă în modificare Unul dintre motivele pentru care este uşor de folosit este introducerea noilor date cu facilitate şi vom şi exemplifică acest locru. În exemplul următor am adăugat câteva câmpuri noi paginii exemplificate mai sus. <div id="menu" align="right" > <a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a> | <a href="#">SITEMAP</a> </div> <div id="content" align="left" > <h5>Titlu Aici </h5> <p>Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului. Iar aici va fi si continutul paragrafului.</p> <h5 >Titlu 2 Aici </h5> <p>Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2. Iar aici va fi si continutul paragrafului 2.</p> </div> Liniile albastere au fost adăugate după formatarea iniţială a paginii.
  3. Inserarea Javascript şi Vbscript în HTML Javascript şi vbscript sunt folosite în codul unei pagini în HTML pentru a da mai multă animaţie, sau pur şi simplu pentru una dintre multele aplicatţi care sunt facilitate de aceste scripturi. Cu ajutorul acestora se pot creea pagini dinamice animaţii ale fotografiilor, un meniu animat cu efecte surprinzătoare şi multe altele. Deasemenea una dintre aplicaţiile cele mai importante este aceea de a valida un formular înainte de a fi trimis. Acesta va scuti userul de mult timp pierdut în cazul în care a introdus greşit datele fiind nevoie de reîncărcarea paginii şi recompletarea câmpurilor. Inserarea Javascript în HTML Introducerea unui cod javascript se face foarte simplu cu ajutorul tagului script. Exemplu : <script type="text/javascript"> <!--script ***Aici va fi introdus scriptul javascript*** --> </script>Pentru codurile javascript se va da atributului "type" valoarea "text/javascript". Inserarea Vbscript în HTML Inserarea unui cod vbscript se face în aceeaşi manieră ca şi a codului javascript cu excepţia înlocuirii valorii "text/javascript" a atributului type cu "text/vbscript". Exemplu : <script type="text/vbscript"> <!--script ( Aici va fi introdus codul vbscript ) --> </script>Este întotdeauna recomandabil introducerea unui comentariu alături de codurile javascript şi vbscript. Acasta va atenţiona browser-ele care nu suportă acest tip de script, sau care au javascript şi vbscript dezactivate .
  4. Un layout nu are prea multe opţiuni. Pe de altă parte un table este foarte folositor. Într-un tabel poate fi introdus cam orice element, chiar şi un alt tabel. <table id="shell" bgcolor="black" border="1" heigh="200" width="300"> <tr><td> <table id="inner" bgcolor="white" heigh="100" width="100"> <tr><td>Tables inside tables!</td></tr> </table> </td><tr></table> Copiea cest cod în notepad şi salvează-l ca un document .html. HTML - layout standard Un layout standard constă într-un banner în zona de sus a paginii un meniu în partea din stânga iar zona de conţinut în partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un websiteă . <table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> <tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <tr><td>Place a banner here</td></tr> </table> </td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> </table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> Aceasta este o abordare de bază . Dacă vei folosi aceste layout-uri în paginile tale, va deveni foarte complex pe măsură ce vei adăuga conţinut. Cu toate acestea este important să specifici înălţimea (height) şi lăţimea (width). Cu cât vei fi mai specific în stabilirea acestor atribute cât şi a altora cu atât mai puţine bug-uri vei avea. <table id="shell" title="Shell" height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height="25"><td bgcolor="white"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table>
  5. Frame-urile sunt folosite pentru a afişa mai multe documente .html întro fereastră. Aceată înseamnă că vei avea o pagină fără conţinut, care va avea rolul de a indica browser-ului ce pagini trebuie să afişeze. Odată cu introducerea PHP şi CSS această tehnică a fost inlăturată puţin câte puţin . HTML - Frames, Pagina Generică În general frame-urile se folosesc pentru a afişa un meniu pe de o parte iar conţinutul pe de o altă parte. Atunci când cineva dă un clik pe un link din meniu se va deschide o altă pagină în partea de conţinut. Vom exemplifica toate acestea cu ajutorul codului următor: <html> <head></head> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> - frameset - Este tagul care stabileşte caracteristicile frame-ului. Frame-urile individuale vor fi definite înăuntrul lui. - frameset cols="#%, *"- "Cols" stabileşte înălţime pe care fiecareframe o va avea. În exemplul anterion am stabilit ca primul frame (meniul) va ocupa 30% din suprafaţa afişată , şi am folosit semnul " * " pentru a indica browser-ului că în restul paginii rămase se va afişa conţinutul paginii . - frame src="" - adresa fişierelor care vor fi afişate ca meniu şi respectiv conţinut. HTML - Frame- Adaugarea unui banner sau Titlu Folosiţi codul urmator: <html><head></head> <frameset rows="20%,*"> <frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> frameset rows="#%, *"- "rows" stabileşte înălţimea fiecarui frame care va fi afişat. HTML - Frame - Margine şi Spaţiere Între frame-uri rămân nişte linii gri care de multe ori nu sunt dorite. Înlăturarea lor este posibilă cu ajutorul frameborder şi framespacing. Aceste atribute vor fi introduse înăuntrul tag-ului frameset. Frameset şi frameborder este acelaşi atribut. Există însă browsere care nu recunosc decât unul dintre cele două . frameborder="#" - Valoarea 0 nu reproduce margine. - border="#"- modifică grosimea marginii. (folosit de netscape) - framespacing="#" - modifică grosimea marginii (folosit de Internet Explorer) <html><head></head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame src="title.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> HTML - "frame name" si "frame target" Pentru a menţine meniul în poziţia actuală iar când dăm click pe pagina de contact de exemplu să se deschidă în locul pagini de conţinut, vom da un nume fiecarui frame şi vom preciza locul unde se va deschide cu ajutorul base target. <html><head> <base target="content"> </head> <frameset rows="20%,*"> <frame name="title" src="title.html"> <frameset cols="30%,*"> <frame name="menu" src="menu.html"> <name="content" src="content.html"> </frameset> </html> Noresize şi scrolling Frame-ul se mai poate personaliza încă puţin folosind atributele neresize şi scrolling. <html><head></head> <frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> <frame src="title.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> <frame src="menu.html" scrolling="auto" noresize> <frame src="content.html" scrolling="yes" noresize> </frameset> </html>- no resize - nu lasă ca frame-ul să se redimensioneze în funcţie de monitorul vizitatorului - scrolling="(yes/no)"- permite sau nu sroll-ul într-un frame
  6. În afară de o culoare simplă pentu fond, se poate folosi şi o fotografie. <table height="100" width="150" background="../img/image.jpg" > <tr><td>Acest text are drept fond o imagine </td></tr> </table> HTML - Background repetat (tile) Atunci când tabelul este mai mare decît imaginea, aceasta se va multiplica şi repetă la nesfârşit. <table height="100" width="250" background="../img/image.jpg" > <tr><td>Acest text are drept fond o imagine </td></tr> </table> HTML - Patterned Backgrounds Repetarea unei imagini are o altă aplicaţie . Această funcţie a browser-ului de a repeta imaginea la nesfârsit se poate folosi ca un avantaj şi anume, putem crea o imagine foarte mică (cu Photoshop sau Corel Paint Shop PRO), de exemplu 4x4 pixeli. Această imagine poate fi un anume model care se va repeta continu. Imaginea a fost marită pentru a fi văzută cu claritate. <table height="100" width="150" background="../../img/pattern.jpg" > <tr><td>This table has a background patterned image</td></tr> </table> HTML - Culoare de fond transparentă O altă metodă de a folosi imagini repetate este fondul transparent. Vom folosi o imagine ".gif" Plasarea acestei imagini în background se face exact în aceeaşi manieră ca şi în exemplul anterior. <table background="../../img/transparent.gif" > <tr><td>This table has a red transparent background image</td></tr> </table>
  7. Tagul <table> este folosit pentru a deschide un tabel. Înăuntrul acestui tag vom găsi alte două taguri <tr> (liniile tabelului) şi <td> (coloanele tabelului). Exemplu : <table border="1"> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table>Vizualizare Conţinutul va fi plasat în interiorul căsuţelor tabelului. O casuţă este ceea ce se află între <td> şi </td>. Atributul border stabileşte lăţimea marginii tabelului. HTML - Tabele asimetrice Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii şi "colspan" pentru a traversa mai multe coloane. Deasemenea dacă vrem ca prima linie să aibe titlu pentru toate coloanele vom folosi tagul <th>. Exemplu : <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table>Vizualizare HTML - Spaţierea celulelor Cu ajutorul atributelor "cellpadding" şi "cellspacing" vom defini distanţa dintre celule. "cellspacing" stabileşte mărimea marginii, iar "cellpandding" stabileşte distanţa dintre margine şi conţinut. <table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Pentru a face mai bine diferenţa vom elimina marginea . <table border="1" cellpadding="10" bgcolor="rgb(0,255,0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Distanţa între celule şi dimensiunea margini va fi interpretată de browser în pixeli. Conform acestei "legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseşte ca unitate de măsură, pixeli .
  8. Formularul este unul dintre cele mai importante unelte folosite de un webmaster pentru a obţine informaţii importante despre o persoană, informaţii precum email, nume, adresă , telefon sau orice alte informaţii. În funcţie de necesităţi infoarmaţia poate fi procesată şi stocată într-un fişier, se pot realiza statistici, formulare de înscriere sau abonamente la informaţia prezentată în pagina ta şi multe altele. HTML - Câmpuri de text Câmpurile de text au câteva atribute care trebuie menţionate încă de la început: - type - Determina tipul câmpului de text. De exemplu: text, trimite, sau parolă. - name - Atribuie un nume câmpului pentru a putea face referire la el mai târziu . - size - Setează mărimea câmpului. - maxlength - valoarea maximă de caractere ce pot fi introduse. <form method="post" action="mailto:youremail@email.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"> </form>Vizualizare Nu folosi acest cod. Datele din formular nu vor fi criptate şi nu vor fi sigure din punct de vedere al securităţii. HTML - Formular de email Să adăugăm acum şi butonul de trimitere. În general, butonul de "trimitere" ar trebui să fie ultimul şi să aibe atributul name definit ca "Trimite" ,"Send", "Submit" sau ceva asemănător. Acest nume va fi numele butonului. Va trebui deasemenea să specificăm o destinaţie a datelor introduse în formular la fel ca şi modul de transfer. Aceasta se poate face agăugând următoarele atribute formularului./p> - method - Vom folosi metoda "post". Aceasta trimite formularul cu informaţia introdusă fără să afişeze detalii userului. - action - Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisă informaţia. <form method="post" action="mailto:youremail@email.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"><br /> <input type="submit" value="Send"> </form>Vizualizare Trebuie doar să schimbi adresa de e-mail cu una valabilă pentru ca formularul să funcţioneze corect. HTML - Butoane Radio Butoanele Radio sunt foarte populare, utile şi uşor de folosit. Cel mai întâlnit exemplu : o întrebare cu multiple variante de răspuns. Atributele care ar trebui cunoscute sunt următoarele. - value - specifică ceea ce va fi trimis în cazul în care un user selectează un anume buton. Doar o singură valoare va fi trimisă . - name - decide cărui set de butoane aparţine butonul selectat. <form method="post" action="mailto:youremail@email.com"> Ce tip de pantofi porţi ? <br /> Culoare: <input type="radio" name="culoare" value="inchis">Închis <input type="radio" name="culoare" value="deschis">Deschis <br /> Mărime: <input type="radio" name="marime" value="mica">Mica <input type="radio" name="marime" value="medie">Medie <input type="radio" name="marime" value="mare">Mare <br /> <input type="submit" value="Email Myself"> </form>Vizualizare În cazul în care vei înlocui adresa de email cu a ta vei primi un email cu: "marime=(alege) culoare=(alege)". HTML - Checkbox Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, două sau mai multe variante de răspuns. Atributele name şi value se folosesc la fel ca şi pentru butoanele radio. <form method="post" action="mailto:youremail@email.com"> <p>Ce culoare de pantofi preferi ? </p> <p> <input type="checkbox" name="pantofi" value="negru">Negru simplu <br/> <input type="checkbox" name="pantofi" value="alb">Alb simplu <br/> <input type="checkbox" name="pantofi" value="gri">Nuante de gri <br/> <input type="checkbox" name="pantofi" value="alb negru ">Alb cu negru <br/> <input type="submit" value="Email Myself"></p> </form>Vizualizare HTML - Alte tipuri de formulare de liste Un alt model de formular tip listă este următorul, în care userul selectează o anumită linie care va fi trimisă ca şi opţiunea aleasă. <form method="post" action="mailto:youremail@email.com"> Preferinte muzicale <select multiple name="music" size="4"> <option value="emo" selected>Emo</option> <option value="metal/rock" >Metal/Rock</option> <option value="hiphop" >Hip Hop</option> <option value="ska" >Ska</option> <option value="jazz" >Jazz</option> <option value="country" >Country</option> <option value="classical" >Classical</option> <option value="alternative" >Alternative</option> <option value="oldies" >Oldies</option> <option value="techno" >Techno</option> </select> <input type="submit" value="Email Yourself"> </form>Vizualizare Un alt model de formular este meniul "dropdown". Acesta va fi afişat ca şi un câmp, care va afişa o listă atunci când este executat un click asupra lui. <form method="post" action="mailto:youremail@email.com"> Nivel de studii? <select name="studii"> <option>Alege</option> <option>Scoala Generala </option> <option>Liceu</option> <option>Postliceala</option> <option>Facultate</option> <option>Doctorat</option> </select> <input type="submit" value="Email Yourself"> </form> Vizualizare Formular de upload Mai întâi de toate trebuie menţionat că acest formular este doar interfaţa, partea vizibilă cu care un user va putea interacţiona . Pentru a face un formular complet de upload sunt necesare cunoştinţe de PHP , PERL şi javascript . Un formular de upload este compus din mai multe părţi. Vom începe prin a stabili mărimea fişierului pe care îl vom uploada. Acest lucru se face cu ajutorul unui câmp ascuns. În continuare vom creea câmpul propriu-zis în care userul va putea scrie adresa fişierului sau pur şi simplu să dea browse pentru a deschide o fereastră windows explore. <input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />Vizualizare HTML - Zone de text, Comentarii În general zonele de text sunt folosite pentru a trimite comentarii. Blogurile şi forumurile sunt principalele tipuri de pagini web care folosesc aceste opţinui. Totuşi există multe alte tipuri de site-uri care folosesc zonele de text pentru a afla părerea userilor despre un anumit aspect. Pentru a crea o zona de text vom specifica mai întâi atributele rows şi cols în interiorul tag-ului <textarea>. "Rows" va stabili înălţimea câmpului în linii de caractere iar "cols" lungimea unei linii în caractere. În exemplul următor există 5 linii a câte 20 de caractere. De asemenea trebuie specificat unul dintre atributele tagului wrap, acestea sunt: wrap= - "off" - "virtual" - "physical" <form method="post" action="mailto:youremail@email.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Scrie un comentariu </textarea> <input type="submit" value="Email Yourself"> </form>Vizualizare
  9. În HTML "entitatea" este numele tehnic pentru "simbol". Câteva simboluri precum copyright, trademark, unele dintre ele nu sunt disponibile pe tastatură şi au nevoie de o scriere specială . - Încep cu semnul "end" - & - După care vom scrie numele semnului - copy - Şi la sfârşit "punct şi virgulă" - ; Copyright Foloseşte © pentru a realiza- © - Simbolul Copyright. Spaţii multiple şi <> Browser-ul va recunoaşte un singur spaţiu, indiferent de cât de multe tastezi , într-un cod de HTML. Există însă o entitate care poate fi introdusă pentru a afişa mai mult de un spaţiu. <p> În acestă frază au fost introduse mai multe spaţii.<p>Vizualizare În acestă frază au fost introduse mai multe spaţii. Pentru a realiza comenzi în HTML sunt folosite simbolurile "mai mult" şi "mai puţin". Pentru a fi afişate în browser va trebuii să folosim o entitate. <p> Mai puţin - < <br/> Mai mult - > <br /> Tagul head - <head> </p>
  10. Atributul "Href" numeşte legătura către o altă pagină web. Este locul unde va fi dus user-ul care da click pe linkul respectiv. Linkurile pot fi de trei tipuri: - interne - către locuri specifice din pagină (anchors) - locale - către alte pagini dar pe acelaşi domeniu - globale - către alte domenii în afara site-ului Internal - href="#anchorname" Local - href="../img/foto.jpg" Global - href="http://www.exemplu.com/" HTML - Link-uri text Pentru a seta începutul şi sfârşitul unui anchor se poate folosi <a></a>. Alege tipul de atribut care îţi trebuie şi pune-l în interiorul tagului "en" . exemplu : <a href="http://www.rangfort.ro.com"target="_blank" >Cea mai smecheră comunitate !</a> HTML - Target-uri de link Atributul target spune browser-ului dacă trebuie să deschidă noua pagină într-o nouă fereastră sau în aceeaşi fereastră. Exemplu de mai jos arată cum se poate deschide o pagină într-o nouă fereastră a browserului. În acest fel putem rămâne pe pagina curentă şi să deschidem o nouă pagină de navigare. <a href="http://www.google.com/"target="_blank" >Google </a> HTML - Anchor Este folosit pentru a lega două secţiuni ale aceleaşi pagini. În acest sens va trebui să dăm un nume secţiunilor . <h1>HTML - Hypertext Reference / href<a name="top"></a></h1> <h2>HTML - Link-uri text<a name="text"></a></h2> <h2>HTML - Link-uri de e-mail<a name="email"></a> </h2>Mai departe trebuie să formulăm codul link-ului punând înaintea numelui anchor-ului semnul diez (#). Exemplu : <a href="#top">Mergi la început </a> <a href="#text">Învaţă despre link-uri text </a> <a href="#email">Învaţă despre adrese de e-mail </a> HTML - Link-uri de e-mail Crearea unui link de email este foarte simplu. Dacă vrei ca cineva să iţi scrie un email cel mai bine ar fi să îi pui la dispoziţie un link cu email-ul tău şi deasemenea un subiect prestabilit. <a href="mailto:gigel@exemplu.com?subject=Nelămuriri " >Întrebări</a> În cazul în care un subiect nu este de ajuns şi vrei să adaugi ceva şi la conţinutul email-ului, o poţi face cu ajutorul următorului cod: <a href="mailto:gigel@exemplu.com?subject=Nelămuriri&body=Scrie aici dacă ai nelămuriri " >Întrebări </a> HTML - Link-uri de download Forma unui link de download este exact aceeaşi ca a unui link normal de text. Problema intervine atunci când vrem să punem o fotografie. Cea mai buna solutie ar fi să folosim un thumbnail cu un link . <a href="http://www.exemplu.com/htmlT/text.zip">Text Document</a> HTML - Link-uri default / Link-uri de bază Foloseşte tag-ul <base> în interiorul elementului head pentru a seta un link de bază . Acesta este necesar în cazul în care ai pe undeva un link care nu functionează corect sau a cărui destinaţie numai există . Link-ul de bază redirecţionează user-ul la adresa specificată .
  11. Tag-ul <font> este folosit pentru a modifica tipul de text, mărimea şi culoare. Foloseşte atributele "size", "color", şi "face" pentru a personaliza textul. Foloseşte tag-ul <basefont> pentru a seta culoarea , mărimea şi stilul întregului text. În general tag-urile "font" şi "basefont" nu se folosesc prea mult, în general se foloseşte css-ul pentru a stabili atributele textului. Mărimea Font-ului Setează mărimea font-ului tău cu ajutorul atributului size al tagului font. Sunt acceptate valori între 1 (cea mai mică) şi 7 (cea mai mare). Valoarea standard a unui text normal este 3. <p> <font size="5">Acesta este un font de mărime 5 </font> </p>Vizualizare Culoarea fontului Setează culoarea textului : <font color="#990000">This text is hexcolor #990000</font> <br /> <font color="red">This text is red</font> Font Face Alege un stil de literă folosind tag-ul fontface. De preferat este " Times new roman " . <p> <font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font> <p> Basefont Cu ajutorul tag-ului basefont vei putea stabili valoarea default a font-ului în pagina ta web. Recomand să specifici un basefont în cazul în care vei utiliza font-ul în HTML. <html> <body> <basefont size="2" color="green"> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</p> </basefont> </body> </html> Atribute <p> <font size="7" face="Georgia, Arial" color="maroon">C</font>customize your font to achieve a desired look. </p>
  12. Culori Culori care sunt suportate in HTML : HTML - Sistemul de culori RGB Acest cod de culori nu este recomandat, deoarece Intenet Explorer este singurul Browser care suportă valorile RGB în HTML. RGB este prescurtarea de la : Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare între 0 şi 255 . Forma de scriere a culorilor în RGB. HTML - Sistemul de culori hexazecimal Sistemul hexazecimal este destul de dificil la prima vedere. Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de încredere şi este compatibil nu numai în aplicaţiile web dar şi în aplicaţii locale precum gimp, photoshop, corel, etc. Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. Primele două caractere (RR) reprezintă culoarea roşu (Red), următoarele dou. (GG) culoarea verde (Green), iar ultimele două (BB) culoarea albastră (Blue). bgcolor="#RRGGBB" HTML - Coduri de culoare - Ruperea codului Tabelul urmator arată cum literele sunt integrate în sistemul hexazecimal, mărind astfel posibilităţile de combinare pentru obţinerea codurilor de culori în HTML. Zecimal Hexazecimal În acest fel sistemul poate avea 16 valori. Un exemplu de cod hexazecimal : bgcolor="#FFFFFF"Litera "F" este valoarea maximă pe care o poate avea sistemul. La întâlnirea acestui cod un browser va afişa culoarea albă. În cazul în care vrei să afli valoarea numerică a acestei culori avem formula următoare: (15 * 16) + (15) = 255 Formula este foarte simplă . Se ia prima valoare a lui "F" sau 15 şi se înmulţeşte cu 16 şi se adaugă celei de-a doua valoare 15. Rezultatul este 255, valoarea maximă pe care o poate avea o culoare primară . bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5 HTML - Culori sigure Sistemul hexazecimal este cel mai utilizat pentru crearea paginilor. Acesta este compatibil cu majoritatea browser-elor, în acest fel interfaţa pagini web nu va fi distorsionată. Pentru a adauga o notă de siguranţă iţi recomand să foloseşti culorile împerechiate (sau true colors) precum: "#0011EE", "#44HHFF", sau "#117788. Culori sigure : Pentru a simplifica tabelul de mai jos am afişat culorile sigure folosind coduri scurte. Ţine minte în acest sub-capitol vorbim de culori împerechiate, de exemplu culoarea reprezentată ca fiind 369 este de fapt 33 66 99 iar FFC va fi FF FF CC. *Cele mai sigure culori HTML Cu toate ca aceste culori sigure (true colors) de mai sus, sunt cele recomadate pentru a fi folosite de către webmasteri, a fost demonstrat că doar 22 dintre cele 216 culori sunt cu adevărat sigure şi nu vor fi absolut modificate în reprezentare de către nici un browser. În tabelul de mai sus culorile cu adevărat sigure au fost reprezentate cu un asterix ( * ) în faţă .
  13. Formatting Pe masură ce vei adaugă din ce în ce mai mult text pagini tale, vei avea nevoie de noi elemente pentru al formata . Aceste tag-uri de formatare pot face elementele, îngroşate ,înclinate , subliniate , tăiate , şi multe altele . <p>Exemplu de <b>Bold Text</b></p> <p>Exemplu de <em>Emphasized Text</em></p> <p>Exemplu de <strong>Strong Text</strong></p> <p>Exemplu de <i>Italic Text</i></p> <p>Exemplu de <sup>superscripted Text</sup></p> <p>Exemplu de <sub>subscripted Text</sub></p> <p>Exemplu de <del>struckthrough Text</del></p> <p>Exemplu de <code>Computer Code Text</code></p> Vizualizare : HTML - Cum să foloseşti tag-urile de formatare Aceste tag-uri ar trebuii utilizare cu moderaţie. Este indicat să le foloseşti pentru a îngroşa sau înclina un cuvânt sau două într-un paragraf. Atunci când vrei să le foloseşti de exemplu cu un întreg paragraf, cel mai bine este să apelelezi la CSS.
  14. Liste HTML pune la dispoziţie trei tipuri de liste. <ol> va afişa o listă ordonată în timp ce <ul> una neordonată , iar pentru a realiza o listă de defniţii se foloseşte <dl>. Foloseşte atributele type şi start pentru a realiza lista cea mai potrivită cerinţelor tale. - <ul> - unsorted list, buline - <ol> - ordered list, numere - <dl> - definition list, listă de definiţii. HTML - Lista ordonată Foloseşte tag-ul <ol>pentru a începe o listă ordonată . Prin punerea <li></li> (list item) între tagurile <ol> si </ol> semnalizezi browser-ului elementele listei. <h4 align="center">Obiective</h4> <ol> <li>Să fac curat </li> <li>Să plimb câinele </li> <li>Să duc gunoiul</li> </ol>Poţi începe lista cu orice alt număr doreşti specificându-l însă cu ajutorul atributului start. <h4 align="center">Obiective</h4> <ol start="4" > <li>Să găsesc o slujbă </li> <li>Să spăl vasele </li> <li>Să spăl geamurile </li> </ol>Acest element nu face nimic ieşit din comun dar este destul de folositor uneori. HTML - Alte tipuri de liste ordonate În afară de modelul mai sus arătat mai sunt alte patru tipuri de liste ordonate. În locul cifrelor arabe poţi folosi cifre romane sau la fel de bine litere , iar în ambele cazuri pot fi folosite litere mici sau majuscule. Foloseşte atributul type pentru a modifica tipul numerotării. <ol type="a"> <ol type="A"> <ol type="i"> <ol type="I"> Liste nesortate Crează o listă nesortată cu ajutorul tagului <ul>. Listele nesortate deasemenea sunt de mai multe tipuri : * Pătrate * Buline * Cercuri Valoarea standard redată de majoritatea browser-elor sunt bulinele . <h4 align="center">Listă de cumpărături </h4> <ul> <li>lapte</li> <li>brânză</li> <li>ouă</li> <li>zahăr</li> </ul>Tipuri de liste neordonate : <ul type="square"> <ul type="disc"> <ul type="circle"> HTML - Lista de definiţii Deasemenea poţi face liste de definiţii folosind tag-ul <dl>. Această listă redă cuvântul deasupra definiţiei. Este indicat să îngroşăm cuvântul pentru a fi mai bine evidenţiat. <dl> <dt><b>Fromage</b></dt> <dd>Cuvânt francez pentru brânză .</dd> <dt><b>Voiture</b></dt> <dd>Cuvânt francez pentru maşină</dd> </dl>
  15. Horizontal line Foloseşte <hr/> pentru a crea o linie orizontală . Acest tag este similar celui de linebreak. [b]<hr/> Foloseşte-le <hr/><hr/> Cu <hr/> ModeraţieDând la o parte acest exemplu exagerat, linia orizontală poate deveni utilă în diferite circumstanţe, precum poţi vedea în exemplul de mai jos: o notă de subsol. <hr /> <p>1. "The Hobbit", JRR Tolkein.<br /> 2. "The Fellowship of the Ring" JRR Tolkein.</p>După cum poţi vedea, tot ceea ce face acest tag este să deseneze o linie orizontală separând diferite zone ale conţinutului sau pur şi simplu decorează. Folosită cu iscusinţă poate da rezultate destul de neaşteptate.
  16. Line Break Un salt în line este diferit faţă de celelalte tag-uri pe care le-am studiat până acum. Plasarea acestuia în codul sursă al documentului va încheia rândul respectiv şi va coborâ cu o linie mai jos lăsând un spaţiu mai mic în comparaţie cu cel de paragraf. Se foloseşte în paragraf după cum poţi observa în exemplul de mai jos : <p> Andy <br /> Strada Nae Leonard , Blocul S2 , Apartament 18 <br /> Galaţi , Romania <br /> </p> Deasemenea se poate folosi pentru a evidenţia o semnătură ca de exemplu la sfârşitul unei scrisori. <p> Mulţuumesc anticipat <br /> <br /> <br /> Andy <br /> Membru Rangfort.ro </p>
  17. Ce întelegem prin HTML ? *Hyper Text Markup Language* este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului. Introducere HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit "agent utilizator HTML", cel mai bun exemplu de astfel de software fiind "browserul web". HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).
  18. Un titlu în HTML este exact ceea ce pare: un titlu adevărat, sau un subtitlu. Atunci când plasezi un text într-un tag <h1>, textul va fi afişat îngroşat, iar dimensiunea literei va fi dată de numărul heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6 unde 1 este cea mai mare dimensiune şi repectiv 6, cea mai mică. <body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>Vizualizare Poţi observa că fiecare titlu are câte un "linebreak" înainte şi după . De fiecare dată când punem un heading, browser-ul va reda automat un salt în linie înaintea lui şi deasemenea după. HTML - Exemplu Practic Luăm un exemplu simplu şi s. practicăm pumin , pentru ca informaţia să fie înţeleasă pe deplin. <h2 align="center">HTML - Titluri 1:6 (Headings) </h2> <p>Un titlu in HTML este exact ceea ce pare: un titlu adevărat </p> <p>Un titlu in HTML este exact ceea ce pare: un titlu adevărat </p>
  19. Paragraful este un element de bază în editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goală deasupra şi dedesuptul textului pentru a fi evidenţiat, iar browser-ul îl va interpreta ca atare. <p>Paragraful este un element de bază </p> <p>Acesta va plasa o linie goală deasupra </p> HTML - Paragraf încadrat, justify <p align="justify">Paragraful este un elemet de bază </p> HTML - Paragraf centrat, center <p align="center">Paragraful este un element de bază </p> HTML - Paragraf aliniat la dreapta, right <p align="right">Paragraful este un element de bază </p>
  20. Atributele sunt folosite pentru a personaliza tag-urile. Ce inseamnă ? La un moment dat vei vrea să redimensionezi o imagine sau un tabel sau să schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor. Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe măsura ce introducem in discutie un nou tag . Acum însă vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tagurilor. Atributele se introduc între parantezele unghiulare (<>) ale tag-ului de deschidere. Atributele "class" si "id" in HTML Priveste exemplu alăturat. <p id="italicsparagraph">Paragraph type 1, înclinat </p> <p id="boldparagraph">Paragraph type 2, îngroşat </p> HTML - Atributul "name" "name" este ceva mai diferit faţă de "id" şi "class". Punând un nume unui element, acesta devine o variabilă de script pentru Javascript, ASP si PHP. Cel mai des este întâlnit în formulare şi alte câmpuri de text interactive. <input type="text" name="TextField" />Acest atribut (name) nu are nici un efect asupra redării casuţei de text, cu toate că în background deţine un rol foarte important. HTML - Atributul "title" Atributul title este folosit foarte puţin faţă de cât ar trebuii, el adaugă un titlu (un pop-up) oricărui conţinut al unui element. Acest atribut nu ar trebui uitat. <h2 title="Atribut title">Un Titlu Oarecare</h2> HTML - Atributul "align" Dacă vrei să aliniezi în mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poţi alinia la stânga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default , elementele se aliniază la stanga, esceptând atuci când se specifică o altă aliniere. <h2 align="center">Titlu centrat </h2> Alte exemple: <h2 align="left">Titlu aliniat la stânga </h2> <h2 align="center">Titlu centrat </h2> <h2 align="right">Titlu aliniat la dreapta </h2> Atribute generice Iată câteva atribute comune : Attribute || Options || Function || align || right, left, center || Aliniere orizontală valign || top, middle, bottom || Aliniere verticală bgcolor || numeric, hexidecimal, sau valoare RGB || Un background în spatele elementului background || URL || O imagine în spatele elementului id || Definit de user || Numeşte un element care se va folosi cu CSS class || Definit de user || Clasifică un element care se va folosi cu CSS width || Valoare numerică || Specifică lăţimea unui tabel, imagine, sau căsuţe de tabel. height || Valoare numerică || Specifică înălţimea unui tabel, imagine, sau căsuţe de tabel. title || Definit de user "Pop-up". || Afişează un titlu pentru un element stabilit .
  21. Un browser citeşte absolut tot ceea ce ai scris în documentul HTML. Tagurile au trei părţi după cum am mai spus : - Deschiderea - Conţinutul - Închiderea. <openingtag>Conţinut</closingtag> <p>Exemplu un paragraf</p>Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML. Alăturat sunt câteva exemple de taguri în HTML. <body>Acţionează ca o capsulă asupra conţinutului. <p>Paragraf</p> <h2>Titlu (heading)</h2> <b>Îngroşat (bold)</b> <i>Înclinat (italic)</i> </body> Excepţii - Tag-uri care nu au nevoie de închidere . Există câteva taguri care nu îndeplinesc modelul anterior arătat. Motivul este ca în realitate aceste tag-uri nu au nevoie de nuci un conţinut. Cel mai simplu exemplu este "linebreak" <br/> Acest tag a îmbinat cele două taguri, de deschidere şi de închidere, într-o formă mult mai simplă şi mai eficace de folosit. Line break se foloseşte pentru a spune browser-ului că vrem să coborâm cu o linie mai jos, fără să încheie paragraful. Urmând acest exemplu şi alte tag-uri au fost modificate pentru o scriere mai simplă şi mai rapidă .
  22. Un element are trei părţi: un tag de deschidere, conţinutul elementului şi tag-ul de închidere . - <p> - tag-ul pentru deschiderea unui paragraf. - Conţinutul elementului - paragraful propriu-zis. - </p> - tag-ul de închidere. ***Notă : Toate paginile web vor avea cel puţin elementele de bază: html, head, title si body. </html>>element</html> Un document HTML întotdeauna va începe şi se va termina cu un tag <html> şi respectiv </html>. Aceasta este structura standard a unui HTML. Deschide Notepad-ul şi copie următorul cod: <html> </html>Salvează documentul din meniul " File / Save As ". Selectează " All Files " şi denumeşte fişierul nou creeat, "index.html". Apasă " Save ". Deschide acum fişierul într-un browser pentru a avea posibilitatea să dam refresh la pagină (F5). Dacă ai facut totul bine vei putea vedea prima ta pagină web, complet albă! Elementul <head> Elementul <head> este cel care urmează. Atâta timp cât îl pui între html şi body totul ar trebui sa fie bine. "Head" nu are nici o funcţie vizibilă . Tag-ul <head> poate oferi browser-ului informaţii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS. Deocamdată însă îl vom lăsa gol cu excepţia faptului că vom introduce următorul element pe listă , dar mai întai să aruncam o privire fără el: <html> <head> </head> </html> Dacă vei salva documentul şi vei încerca să refresh la pagina inţială din browser nu vei nota nici o diferenţă . Elementul <title> Pentru ca totul să iasă bine , trebuie să pui tag-ul title înăuntrul celui de head. Ceea ce vei scrie intre cele două tag-uri (<title> si </title>) va putea fi vizualizat ca şi numele browser-ului, de obicei în partea din stânga sus. Alăturat avem şi codul sursă : <html> <head> <title> Prima mea pagina web!</title> </head> </html>Salvează fişierul şi deschide-l în browser. Vei putea vedea titlul după cum am mai spus în partea din stânga sus . Poţi pune orice nume doreşti , eu doar am dat un exemplu . Elementul <body> Elementul body este cel care defineşte începerea conţinutului pagini propriu-zise (titluri, paragrafuri, fotografii, muzică , etc.). <html> <head> <title> Prima mea pagină web!</title> </head> <body> Aici va fi conţinutul . </body> </html>
  23. În acest tutorial voi explica la ce ne foloseşte fiecare tag . Tagurile despre care vorbeam sunt: <head>, <title>, <h2> si <p>. <html> <head> <title>Pagina mea! </title> </head> <body> <h2>Bine ati venit.</h2> <p>Când voi termina pagina , va fi cea mai tare !</p> </body> </html> <head> Acest tag urmează imediat după <html> şi este folosit pentru a indica browserului informaţii utile precum: Titlul pagini, conţinutul şi multe altele. <title> Se pune între <head> si </head>. Acest tag este cel care dă numele pagini. Numele va fi afişat în browser, de obicei în partea stângă sus. În exemplul anterior titlul era "Pagina mea!" şi va fi afişat ca şi titlul browserului. <h2> Acesta este titlul care apare în pagina, înainte de conţinut şi va fi mai mare decât litera de conţinut. <h2> înseamnă că e cea de-a doua mărime a literei dintre cele şase care există. <h1> este cea mai mare iar <h6> va fi cea mai mică. <p> Este tagul care marchează deschiderea şi încheierea unui paragraf. Aşa că atunci când vei începe un paragraf asigurăte că ai pus <p> la început si </p> la sfârşit.
  24. Tag-ul <body> spune browserului unde începe conţinutul paginii web. <body> este deasemenea un exemplu de tag care trebuie să existe în absolut orice pagină web. Tag-uri de bază in HTML O pagină web are în componenţa sa două elemente de bază. Dacă vei încerca să creezi o pagină fără cele două tag-uri, nu o să meargă . <html> <body> Conţinutul paginii va fi aici </body> </html> Primul tag se numeşte <html> şi este cel care îi spune browserului că a început un cod în HTML. Cel de-al doilea tag, <body>, spune browserului că aici începe partea vizibilă sau conţinutul paginii HTML. Închiderea tag-urilor în HTML Avem la sfarsitul documentului, </body> si </html>. Acestea sunt tag-urile de închidere. </body>, aceste tag-uri anunţă browserul că s-a încheiat conţinulul pagini, iar </html> că s-a încheiat documentul HTML. Slash "/" este pus înaintea numelui tag-ului şi spune browserului ca ar dori să încheie respectiva funcţie. Deci <tag> este folosit pentru a începe o funcţie, iar </tag> pentru a o încheia. Ordinea tag-urilor Ordinea deschiderii şi a închiderii tagurilor este foarte importantă. Dacă un tag este deschis într-un altul, de exemplu body este deschis în html atunci acel tag (body) este cel care trebuie închis înaintea celui de-al doilea tag (html). Am închis mai întai body pentru că a fost cel care s-a deschis cel mai recent. Această regulă şi anume deschiderea şi închiderea tag-urilor se aplică la toate celelalte taguri ale documentelor HTML. Cea de-a doua pagină Copie acest cod în notepad, aşa cum ai făcut şi prima dată . <html> <head> <title>Pagina mea! </title> </head> <body> <h2>Bine ati venit.</h2> <p>Prima mea pagină web</p> </body> </html> După ce te-ai asigurat că totul e făcut conform indicaţiilor anterioare, poţi salva documentul. Ai putea chiar să-l salvezi cu acelaşi nume ca si cel anterior, şi anume "index.html". S-ar putea să te întrebe dacă vrei să salvezi peste documentul anterior, poti să dai liniştit OK, nu vom mai avea nevoie de documentul anterior . Atenţie !! : Aceste tutoriale nu sunt făcute de mine . Au fost creeate de un prieten !
  25. Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta stă la baza creării unui site web. Cu alte cuvinte, înainte de a învăţa alte limbaje de programare trebuie să cunoşti cel putin HTML. Prima pagină web Pentru început copie şi păstrează urmatorul cod HTML în notepad. <html> <head> </head> <body><h2>Pagină web!</h2> </body> </html> Codul de mai sus este tot ceea ce îţi trebuie pentru a crea o pagină web de bază. Acum poţi salva documentul în notepad selectând din meniul "File", opţiunea "Save As". În fereastra care se deschide, selectează "All Files". Vom da un nume fişierului, de exemplu "index.html", fără ghilimele. Browser Pentru a putea vedea pagina, va trebui să foloseşti un browser. Browserele sunt programele de internet care interpretează codurile HTML asemanatoare cu acelea pe care le-ai copiat şi salvat în notepad. Acestea transformă codul HTML într-o pagină web care poate fi citită de orice oricine . Cele mai folosite browsere sunt: - Internet Explorer - FireFox - Opera - Chrome - Safari Vizualizarea primei pagini Pentru a putea vizualiza pagina web trebuie să deschizi fişierul "index.html" într-un browser. Deschide o nouă fereastră pe browser şi urmăreşte intrucţiunile: - Din File selectează Open. - Click pe Browse şi selectează fişierul index.html Şi aşa ţi-ai creat o pagină web !
×
×
  • Create New...