Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Script ninsoare
Scris de JeKa123 Ieri la 20:20
» Cerere script
Scris de SSYT Joi 1 Dec - 23:22
» Hello
Scris de admin Mier 30 Noi - 16:10
Cuvinte-cheie

subforumuri  Metin2  banner  edit  animate  subiecte  avatar  Statistici  legenda  Bara  tema  cautare  navigare  ultimele  Mesaje  punbb  phpBB2  radio  profil  reclama  menu  meniu  chenar  html  tutorial  drop  

Mergi la pagina : 1, 2  Urmatorul

Scoala de coding @ iAngel

Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Scoala de coding @ iAngel la data de Sam 25 Ian - 22:18

Forumul meu de teste :
[Doar moderatorii au dreptul de a vedea acest link]
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 27 Ian - 16:31

Bine,ai venit angel cu ce te pot ajuta?




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 27 Ian - 19:10

Hmm...Ceva CSS si JavaScript? Poate si umpic de HTML..
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 27 Ian - 19:46

hai sa o luam incet,cu html tabele
La fel cum le-am spus celorlalti trebuie sa inveti putin sa creezi niste tabele.
urmareste cu atentie aceste doua subiecte,apoi revino cu nelamuriri

[Doar moderatorii au dreptul de a vedea acest link]

pentru a sti cum se creaza niste tabele urmeaza si acest pas

[Doar moderatorii au dreptul de a vedea acest link]


dupa aceea noi te vom indruma spre personalizarea lor in stilul nostru original ET




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 27 Ian - 20:40

Gata,uite aici :
[Doar moderatorii au dreptul de a vedea acest link]
Ce zici?
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 27 Ian - 23:22

ai reusit,
acum hai sa iti dau de lucru hai sa facem ceva simplu si frumos.

iti fac un mic tutorial folosindu-ma de tabele si clasa "class" (voi explica si cum functioneaza clasele)

am sa creez un tabel de 300pixeli cu un singur th(care se foloseste la titluri) si doua td(un continut),nu l-am creat dar stiu cum va arata.
hai sa incepem

1.Cream tabelul cu clasa,th,si td.

Cod:

<table class="semnatura" width="350px">
<tr>
<th align="center" colspan="2">Acesta este un titlu oarecare</th>
</tr>


<td width="50px" align="center" height="50px">
<img src="http://r19.imgfast.net/users/1914/11/79/82/smiles/560224.png"></img>
</td>



<td height="50px">
Salutare acesta este continutul meu preferat :)
</td>


</table>
















Acesta este un titlu oarecare

[Doar moderatorii au dreptul sa vada aceasta imagine]

Salutare acesta este continutul meu preferat

Dupa cum vezi la tabel i-am adaugat o clasa

Cod:
<table class="semnatura"

2.personalizare tabel (background,border,box-shadow)

Cod:
table.semnatura{
background: #f4f4f4;
border: 2px solid white;
box-shadow: 0px 0px 2px black;}

3.personalizare titul (th)

Cod:
table th{
background: #fff;
margin: 2px;
border: 1px solid #d3d3d3;


4.personalizare td (casete cu continut)

Cod:
table td{
background: #fff;
margin: 2px;
border: 1px solid #d3d3d3;
}


si gata,acum este randul tau sa incerci,dar totusi iti las tot codul html sa vezi cum a iesit

Cod:
<!DOCTYPE html>
<html>
<body>
<table class="semnatura" width="350px">
<tr>
<th align="center" colspan="2">Acesta este un titlu oarecare</th>
</tr>


<td width="50px" align="center" height="50px">
<img src="http://r19.imgfast.net/users/1914/11/79/82/smiles/560224.png"></img>
</td>



<td height="50px">
Salutare acesta este continutul meu preferat :)
</td>


</table>
<style>

table.semnatura{
background: #f4f4f4;
border: 2px solid white;
box-shadow: 0px 0px 2px black;}

table td{
background: #fff;
margin: 2px;
border: 1px solid #d3d3d3;
}

table th{
background: #fff;
margin: 2px;
border: 1px solid #d3d3d3;

</style>
</body>
</html>




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Mar 28 Ian - 17:04

[Doar moderatorii au dreptul de a vedea acest link]
Ce zici?
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Mar 28 Ian - 21:11

a iesit destul de bine.

acum creeza inca un tabel identic dar cu albastru,deci sa ai doua unul langa altul




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Mar 28 Ian - 21:27

Am facut update,Verifica(acelasi link)
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Mier 29 Ian - 12:02

Doar ce am dat drumul la laptop si era deja pe link,felicitari, imi place mult de tot cum a iesit.

Nota 10 pentru tabele.

Acum hai sa lucram cu div.
un div seamana foarte mult cu un tabel el se foloseste in mare parte pentru personalizri tabele meniuri,etc.
Sunt doua mai mute tipuri
Cod:
class
id
title
style
height
width
Tag-urile div sunt niste suporturi pentru alte taguri.


uite un mic exemplu




Cod:

<div id="menu" align="right" >

<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>

</div>



pentru personalizarea lui in css trebuie sa scri
Cod:
#menu{
coduri csss}

sa vad cum te descurci




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Mier 29 Ian - 14:19

Am aplicat pe primul tabel
Si multumesc mult !
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Mier 29 Ian - 15:03

cu placere.
Acum hai sa trecem mai departe.
ce anume ai vrea sa facem?




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Mier 29 Ian - 15:19

Orice.
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Joi 30 Ian - 22:59

Fa te rog un print screen la ceva care iti place,sau vrei sa facem un mic index simplu?




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Vin 31 Ian - 12:08

Haide sa facem un mic index simplu.
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Vin 31 Ian - 15:46

[Doar moderatorii au dreptul sa vada aceasta imagine]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Copyright © 2013 - 2014 Extrem-Tutorials
Un index-micut si simplu,acum daca tu doresti sa fie ceva mai personalizat inlocuieste textul dorit cu un altul ceva mai scurt,si apoi sub el adauga acest cod


Cod:
<a href="LINK FORUM/forum.htm"><img alt="" src="IMAGINE 1" border="0"></a><a href="LINK FORUM/portal.htm"><img alt="" src="IMAGINE 2" border="0"></a>


Codul aceste este pentru redirectionare catre 2 pagini,forum si index.


Apoi el a arata in urmatorul fel

[Doar moderatorii au dreptul sa vada aceasta imagine]
Salutare,sunt mr.franta

Va prezint un mic index elegant si placut folosindu-ma de bbcode si html code

[Doar moderatorii au dreptul de a vedea acest link][Doar moderatorii au dreptul de a vedea acest link]

Copyright © 2013 - 2014 Extrem-Tutorials
Eu acum m-am folosit de codurile BBCODE

Diferenta este ca la tabele in loc de aceasta paranteza <> am folosit-o pe aceasta []




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Vin 31 Ian - 17:32

[Doar moderatorii au dreptul de a vedea acest link]
**Am folosit imaginile din primul al tau.
Ce zici sa ma inveti cateva efecte pentru meniuri?
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Sam 1 Feb - 11:56

Normal ca te pot ajuta. citeste acest tutorial
[Doar moderatorii au dreptul de a vedea acest link]

Pentru crearea unui meniu avem nevoie de un div in care adaugam un meniu

Cod:
<div class="orizontal">

<ul>
<li><a href="#">Link</a></li>
<li><a class="hover" href="#">Acasa</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>

Previzualizare




  • [Doar moderatorii au dreptul de a vedea acest link]

  • [Doar moderatorii au dreptul de a vedea acest link]

  • [Doar moderatorii au dreptul de a vedea acest link]

  • [Doar moderatorii au dreptul de a vedea acest link]

  • [Doar moderatorii au dreptul de a vedea acest link]

  • [Doar moderatorii au dreptul de a vedea acest link]





Incepem sa personalam la el ok?

Adaugam acest cod in css pentru a elimina acele puncte si pozitionarea a fi mai precisa.

Cod:

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}


Acum ca au disparut bulinele il aliniem cu acest cod.

Cod:

li
{
float:left;
}


Bun,acum este aliniat,haide sa ii dam o latime a fiecarui link,o culoare si o mica umbra.

Cod:

a
{
display:block;
width:90px;
background-color: #dddddd;
box-shadow: 0px 0px 1px black;
}


El acum arata exact asa [Doar moderatorii au dreptul de a vedea acest link]

Mergem mai departe,personalizarea textului (link)

Cod:


div.orizontal a:link, div.orizontal a:visited {
font-weight: bold;
font-size: 12px;
font-family: tahoma;
color: #333;
text-align: center;
padding: 4px;
text-decoration: none;
border-top: 1px solid #d2d2d2;
border-bottom: 3px solid #B72801;
box-shadow: 0px 0px 15px black;}


Previzualizare [Doar moderatorii au dreptul de a vedea acest link]

Acum tot ce mai trebuie sa faci pentru a se schimba culoarea la meniu cand treci cu mouseul peste el este sa adaugi la acest cod un hover.

Cod:
div.orizontal a:link

Daca nu sti eu iti voi scrie hover-ul iar tu vei pune codul css.

Cod:
div.orizontal a:link:hover{
coduri css aici}

culoare text (color: #culoare;)
fundal (background-color: #culoare)
border jos (border-bottom: 3px solid #culoare)

Dupa ce termini,vom face acel link "acasa" ca in tutorial.




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Dum 2 Feb - 13:38

[Doar moderatorii au dreptul de a vedea acest link]
Ce zici?(Am adaugat meniul in acel index)
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Dum 2 Feb - 15:23

Ai facut doua greseli.
1.Nu ai copiat meniul cu tot cu div
Inlocuieste
Cod:
    <ul>
                                    <li><a class="hover" href="#">Info</a></li>
                                    <li><a class="hover" href="http://extrem-tutorials.com" target="_blank">ET</a></li>
                                  <li><a class="hover" href="#">Forum</a></li>
                                    <li><a class="hover" href="#">Acasa</a></li>
                                  </ul>


Cu acesta

Cod:
<div class="meniu">    <ul>
                                    <li><a class="hover" href="#">Info</a></li>
                                    <li><a class="hover" href="http://extrem-tutorials.com" target="_blank">ET</a></li>
                                  <li><a class="hover" href="#">Forum</a></li>
                                    <li><a class="hover" href="#">Acasa</a></li>
                                  </ul></div>


Si nu ai adaugat un background si culoare la text a meniului

Adauga in css pentru background si text acest cod
Cod:
div.menu a{
background-color: #culoare;
color: white!important;
}

Unde scrie #culoare inlocuiesti cu o culoare dorita.









[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 12:15

Am adaugat,si nu s-a schimbat nimic..
edit:Acum am observat cum arata pe chrome...Eu am folosit Mozilla Firefox,pentru ca pe Chrome nu pot edita HTML.
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 19:00

Nu ai adaugat CSS-ul inca




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 20:32

Am adaugat,apoi am sters..(Pentru ca nu se schimbase nimic.)
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 20:37

Am inteles,eu sunt in pana de idei,ce ai vrea sa mai inveti? poate si un print screen




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 20:40

Cum se face dropdown?(Sa luam pe rand toate versiunile la forum)
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 21:20

Nu am incercat pana acum sa fac un dropdown,nici eu nu sunt un mare expert inca am multe de invatat.
Uite aici un mic tutorial [Doar moderatorii au dreptul de a vedea acest link] l-am urmarit si eu cu atentie si mi-a iesit din prima




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 21:37

Template este la fel ca o pagina HTML?
(Ma refer Template de PhpBB2 si PunBB)
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 21:48

Template,index da sunt pagini html,in cazul forumurilor noastre este ceva mai frumos aranjat,greu de explicat.




[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea
Membru activ
Mesaje : 306
Localizare : Romania
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://nimic.com
Re: Scoala de coding @ iAngel la data de Lun 3 Feb - 21:50

Dar se modifica la fel,doar ca in loc sa punem CSS in
Cod:
<style>
il punem in Foi de stil,nu?
Membru dedicat
Mesaje : 827
Localizare : in spatele tau
Sex : masculin
0 avertismente
Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
Re: Scoala de coding @ iAngel la data de Mar 4 Feb - 10:01

da,codul css se pune in tagul

Cod:
<style>

cod css aici


</style>


Iar daca ai nevoie pentru js adaugi codurile in acest tag

Cod:
<script> cod js aici</script>





[Doar moderatorii au dreptul sa vada aceasta imagine]


Sabin ;x este online 24/24 cateodata si noaptea

Mergi la pagina : 1, 2  Urmatorul

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum