Navigare rapidă

Ultimele subiecte
» Cum sa repari un CD sau DVD "Idiot"
Scris de drax Mier 3 Mai - 10:05
» No Avatars
Scris de MihaiExtremTutorials Vin 28 Apr - 23:17
» Set complet de iconuri
Scris de drax Vin 28 Apr - 11:25
» Butoane Subiecte Multicolor
Scris de drax Vin 28 Apr - 11:23
Cuvinte-cheie

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

Mergi la pagina : 1, 2  Urmatorul

Scoala de coding @ iAngel

avatar
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]
avatar
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
avatar
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..
avatar
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
avatar
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?
avatar
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
avatar
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?
avatar
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
avatar
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)
avatar
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
avatar
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 !
avatar
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
avatar
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.
avatar
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
avatar
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.
avatar
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
avatar
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?
avatar
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
avatar
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)
avatar
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
avatar
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.
avatar
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
avatar
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.)
avatar
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
avatar
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)
avatar
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
avatar
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)
avatar
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
avatar
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?
avatar
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