PhP-webmarket: April 2014

Wednesday, April 30, 2014

Hiperlink képekel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hiperlink képekel css segítségével.</title>

<style>

#menu{
    width:1040px;
    height: 300px;
        margin: 0 auto;
}

#menu ul {
    list-style: none;
    padding-left: 0px;
}

#menu li {
    display: inline;

}

#button1{
    background: url(kepek/a.jpg) no-repeat left;
    width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}

#button1:hover{
    text-decoration: none;
    background: url(kepek/a2.jpg);
    background-repeat:no-repeat;
}

#button2{
    background:url(kepek/b.jpg) no-repeat left;
     width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}

#button2:hover{
    text-decoration: none;
    background: url(kepek/b2.jpg);
    background-repeat:no-repeat;
}

#button3{
    background: url(kepek/c.jpg) no-repeat left;
     width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}
#button3:hover{
    text-decoration: none;
    background: url(kepek/c2.jpg);
    background-repeat:no-repeat;
}

#button4{
    background: url(kepek/d.jpg) no-repeat left;
    width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}
#button4:hover{
    text-decoration: none;
    background: url(kepek/d2.jpg);
    background-repeat:no-repeat;
}

#menu ul
{
margin: 0px;
padding: 0px;
}

#menu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight:normal;
    color: #ffffff;
    float: left;
    width: 256px;
        height: 300px;
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 0px;
        margin-right: 0px;
}

#menu a:hover{

}

</style>

</head>

<body bgcolor="#000000">

<div id="menu">
        <ul>
        <img src="kepek/fej.png" width="1024" height="100" />
            <li><a href="#" title="" id="button1">Home</a></li>
            <li><a href="#" title="" id="button2">Blog</a></li>
            <li><a href="#" title="" id="button3">Gallery</a></li>
            <li><a href="#" title="" id="button4">About</a></li>
            <font color="#FFFFFF" face="28 Days Later" size="+3">webmarketshop@gmail.com</font>
        </ul>
    </div>

</div>

</body>
</html>

Saturday, April 26, 2014

Email Küldés PHP segítségével

Ez a program most három különálló programból fog állni .

index.html - ez a beviteli program.
mail_feldolgoz.php - ez a program értelmezi a bevitt adatokat és ennek megfelelően elküldi a leveleket.
koszon.html -ez pedig megköszöni a levelet.

Tehát először is hozunk létre az index.html oldalt.
Ide gépeljük be a következő kódot.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email Küldés PHP segítségével</title>

<style>

#mezo{
    background-color:#FC0;
    border-style:double;
    border-color:#900;
    color:#900;}

</style>

</head>

<body>



<center>

    <form action="mail_feldolgoz.php" method="post">

        <p>Az ön neve : <input id="mezo" name="nev" size="20" /></p>
        <p>Az ön e-mail címe : <input id="mezo" name="mail" size="20" /></p>
        <p><textarea id="mezo" name="szoveg" cols="20" rows="10">A levél szövege.</textarea></p>
        <p><input id="mezo" type="submit" value="ELKÜLD" /></p>

    </form>

</center>

</body>
</html>

Most hozzunk létre egy mail_feldolgoz.php oldalt. Ez az oldal fogja elküldeni a leveleket.

<?
/* Ez a php program csak TXT levelet küld, semien formázás néknül .
a \n utasitás az ENTER - nek felel meg.*/

    $nev=$_POST["nev"];

    $mail1=$_POST["mail"];
    $mail2="webmarketshop@gmail.com";

    $subject1="Köszönjük a levelét.";
    $subject2="Levél a szobytech serveről.";

    $level=$_POST["szoveg"];
    $level1="Köszönjük érdeklödését\nLevelét továbbitotuk a szerkesztőnek.\nAddig még nem érkezik tényleges válasz, kérjük csaktlakozon FACEBOOK oldalunkhoz : \nhttps://www.facebook.com/groups/htmlprogramming/\n\nKöszönetel a SzobyTECH .";
    $level2="Név : ".$nev."\nE-mailcím : ".$mail1."\n\n".$level;


        mail($mail1,$subject1,$level1);
        mail($mail2,$subject2,$level2);

    /* Ha már idályig eljutott akor a levelek el lettek küldve és innen már csak
    át kell irányítanuk egy köszönő oldalra.*/

    header("location:koszon.html");

?>

És végezetül hozzunk létre egy koszon.html nevű oldalt , ez fogja megköszöni a levelet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Köszönő oldal a E-mail küldéshez.</title>
</head>

<body>

<center>

<h3>Köszönjük a levelét .<br />
Továbbitotuk a megfelelő személynek.<br />
<br />
<a href="index.html" target="_parent">Új levél írása.</a></h3>
</center>

</body>
</html>

Ahhoz, hogy a programok rendesen működjenek, nemárt megnézni a server beállításait.

Wednesday, April 23, 2014

E-mail küldés HTML-ben egyszerüen

Tuesday, April 22, 2014

Input BOX formázása CSS

A CSS stílus csak az inputra vonatkozik .

igen nem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input box és Submit gomb formázása .</title>

<style>

input{
    background-color:#900; /* Input box hátér színe */
    color:#FFF; /* Betű színe*/
    text-align:center; /* Szöveg igazitás */
    font-size:24px; /* Betű mérete*/
    border-radius:25px; /* Box lekerekitése */
}

</style>

</head>

<body>
<center>
A CSS stílus csak az inputra vonatkozik .<br />
<input name="valami" size="50" value="hello" maxlength="5" /> <input type="submit" value="send" /><br />
<br />
<input type="checkbox" value="ez1" checked="checked" />igen <input type="checkbox" value="ez2" />nem<br />
<br />
<input type="button" value="ez egy sima gomb" /><br />
<br />
<input type="file" name="ez_egy_file" size="25" />
</center>
</body>
</html>

Sunday, April 20, 2014

Táblázat kezelás CSS-ben

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Táblázat formázása</title>

<style>

table{
   border-style:dashed;
   border-top-left-radius:50px;}

td{border-top-left-radius:50px;
   border-left-color:#F0F;
   }

#td_center{border-bottom-right-radius:50px;
background-color:#060;
border-style:dotted;
border:ridge;
border-color:#F90;}

</style>

</head>

<body>

<table width="300" border="1" align="center">
<tr>
    <td height="100" bgcolor="#FF0000"> </td>
    <td bgcolor="#FFFF00"> </td>
    <td bgcolor="#00FFFF"> </td>
</tr>
<tr>
    <td id="td_center" height="100" colspan="3"> </td>
</tr>
<tr>
    <td height="100"> </td>
    <td> </td>
    <td> </td>
</tr>
</table>

</body>
</html>

Sunday, April 13, 2014

Betűk színei, méretei és tipusai CSS segítségével

Betü szín 1

Betü mérete 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Betük mérete és színei !!!</title>

<style>

#betu2{
   color:#F00;}

#betu3{
   color:#0F0;}

#betu4{
   color:#00F;}

#betu5{
   color:#FF0;}

#betu6{
   color:#F0F;}

#betu7{
   font-size:12px;}

#betu8{
   font-size:18px;}

#betu9{
   font-size:24px;}

#betu10{
   font-size:36px;}

#betu11{
   font-size:36px;
   font-family:Verdana, Geneva, sans-serif;}

#betu12{
   font-size:36px;
   font-family:Georgia, "Times New Roman", Times, serif;}

#betu13{
   font-size:36px;
   font-family:"Courier New", Courier, monospace;}

#betu14{
   font-size:36px;
   font-family:Arial, Helvetica, sans-serif;}

#betu15{
   font-size:36px;
   font-family:"Comic Sans MS", cursive;}

</style>
</head>

<body>

<p id="betu1">Betü szín 1</p>
<p id="betu2">Betü szín 1</p>
<p id="betu3">Betü szín 1</p>
<p id="betu4">Betü szín 1</p>
<p id="betu5">Betü szín 1</p>
<p id="betu6">Betü szín 1</p>

<p id="betu7">Betü mérete 1</p>
<p id="betu8">Betü mérete 1</p>
<p id="betu9">Betü mérete 1</p>
<p id="betu10">Betü mérete 1</p>

<p id="betu11">Betü mérete 1</p>
<p id="betu12">Betü mérete 1</p>
<p id="betu13">Betü mérete 1</p>
<p id="betu14">Betü mérete 1</p>
<p id="betu15">Betü mérete 1</p>

</body>
</html>

Monday, April 7, 2014

Hiperlink KÉP nagyítása CSS segítségével

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hiperlink KÉP nagyítása !!!</title>

<style>

#link{
    width:150px; /* A kép szélesége */
    height:100px;}/* A kép magasága */


#link:hover{
    width:400px; /* A kép szélesége */
    height:273px;/* A kép magasága */
    }

</style>
</head>

<body>
<center>
<a href="#">

<img id="link" src="wotermarklogo.png" width="400" height="273" />

</a>
</center>
</body>
</html>

Wednesday, April 2, 2014

Fényújság - Futószöveg

Keres fel e-mailban webmarketshop@gmail.com Keres fel e-mailban webmarketshop@gmail.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fényújság - Futószöveg </title>

<style>

#szoveg{
    font-size:36px;}

#szoveg1{
    color:#900;
    text-decoration:line-through;}

</style>

</head>

<body>

<marquee><font id="szoveg">Keres fel e-mailban <a href="mailto:webmarketshop@gmail.com">webmarketshop@gmail.com</a></font></marquee>
<marquee><font id="szoveg1">Keres fel e-mailban <a href="mailto:webmarketshop@gmail.com">webmarketshop@gmail.com</a></font></marquee>

</body>
</html>

CSS animáció - Gombok változása

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gomb Animació 1</title>

<style>

#gomb{
    width:150px; /* A gomb szélesége */
    text-decoration:none; /* Szöveg dekorácíó letiltva */
    border-color:#900; /* Keret színe */
    border-radius:15px;} /* Keret lekerekitése */

#gomb:hover{
    width:200px; /* A gomb szélesége */
    text-decoration:none; /* Keret lekerekitése */
    background-color:#03F;
    color:#FFF;}

</style>

</head>

<body>

<a href="#"><input id="gomb" type="button" value="gomb 1" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 2" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 3" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 4" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 5" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 6" /></a>

</body>
</html>

CSS animácíó - Gombok mozgatása

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gomb Animació 1</title>

<style>

#gomb{
    width:150px; /* A gomb szélesége */
    text-decoration:none; /* Szöveg dekorácíó letiltva */
    border-color:#900; /* Keret színe */
    border-radius:15px;} /* Keret lekerekitése */

#gomb:hover{
    margin-left:10px; /* A gomb elmozditása */
    text-decoration:none;} /* Keret lekerekitése */

</style>

</head>

<body>

<a href="#"><input id="gomb" type="button" value="gomb 1" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 2" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 3" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 4" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 5" /></a><br />
<a href="#"><input id="gomb" type="button" value="gomb 6" /></a>

</body>
</html>

Oldalak