Kategori: HTML, HTML5

HTML Liste Sınıfı

<?php
header('Content-Type: text/html; charset=utf-8');
class HTML_Liste {
	var $link,$link_baslik,$font,$renk,$tip,$bg_renk;
	var $dizi = array();
	function HTML_Liste($dizi,$font,$renk,$bg_renk,$tip){
		$this->dizi = $dizi;
		$this->font = $font;
		$this->renk = $renk;
		$this->tip = $tip;
		$this->bg_renk = $bg_renk;
	}
	function goster(){
		echo "<ul style='padding-top:5px;padding-bottom:5px;background-color:$this->bg_renk;list-style-type:".$this->tip."' >";
		foreach($this->dizi as $link=>$link_baslik){
			echo "<a style='text-decoration:none;' href='$link'><li style='padding-top:1px;font-family:verdana; color:$this->renk; font-size:8pt font-style:bold;'>$link_baslik</li></a>";
		}
		echo "</ul>";
	}
}
$links = array("og.php"=>"Özgeçmiş","bilgi.php"=>"Bilgi","kurslar.php"=>"Kurslar");
$html_list = new HTML_Liste($links,'sans-serif','black','orange','disc');
$html_list->goster();
?>

Çıktısı

Gelişmiş Html Tablo Oluşturma Sınıfı

<?php
class tabloYap {
   var $border = "1";
   var $genislik = "500";
   var $class = "tabledefault";
   var $tabloveri = Array();
   var $satirlar = 0;
   var $ilksatirlartil = "tablehead";
   var $hucredoldur = "2";
   var $hucrearalik = "0";
   var $kenarrengi = "#666666";
   function degerAyarla($anahtar, $deger) {
       $this->$anahtar = $deger;
   }
   function ciktiAl () {
       $tampon = "\n<TABLE BORDER=\"$this->border\" WIDTH=\"$this->genislik\" BORDERCOLOR=\"$this->kenarrengi\"";
       $tampon .= " CLASS=\"$this->class\" CELLPADDING=\"$this->hucredoldur\" CELLSPACING=\"$this->hucrearalik\">\n";
       for ($i = 1; $i <= $this->satirlar; $i++) {
          $satirveri = $this->tabloveri[$i];
          IF (is_array($satirveri)) {
            IF ($i == 1 && $this->ilksatirlartil) {
                $tampon .= "  <TR class=\"$this->ilksatirlartil\"> \n";
            } ELSE {
                $tampon .= "  <TR>\n";
            }
            while (list($anahtar, $deger) = each($satirveri)) {
               $tampon .= "    <TD";
               $tampon .= ($deger["birlesiksatir"]) ? " COLSPAN=\"".$deger["birlesiksatir"]."\"" : "";
               $tampon .= ($deger["genislik"]) ? " WIDTH=\"".$deger["genislik"]."\">" : ">";
               $tampon .= ($deger["deger"]) ? $deger["deger"] : " ";
               $tampon .= "</TD>\n";
            }
            $tampon .= "  </TR>\n";
          }
       }
       $tampon .= "</TABLE>\n";
       return $tampon;
   }
   function satirEkle($stil = false) {
       $this->satirlar++;
   }
   function hucreEkle($deger = false, $birlesiksatir = false, $genislik = false) {
       $this->tabloveri[$this->satirlar][] = Array (
           "deger" => $deger,
           "birlesiksatir" => $birlesiksatir,
           "genislik" => $genislik);
   }
}
$table = new tabloYap;
$table->satirEkle();
$table->hucreEkle("",'',20);
$table->hucreEkle("Ozellik",'',20);
$table->hucreEkle("Deger");
$table->satirEkle();
$table->hucreEkle("Isim:",'',20);
$table->hucreEkle("Mehmet",2);
$table->satirEkle();
$table->hucreEkle("Adres:",2);
$table->hucreEkle("Turkiye");
$table->degerAyarla("border", 1);
echo $table->ciktiAl();
?>

Çıktısı

<TABLE BORDER="1" WIDTH="500" BORDERCOLOR="#666666" CLASS="tabledefault" CELLPADDING="2" CELLSPACING="0">
  <TR class="tablehead"> 
    <TD WIDTH="20"> </TD>
    <TD WIDTH="20">Ozellik</TD>
    <TD>Deger</TD>
  </TR>
  <TR>
    <TD WIDTH="20">Isim:</TD>
    <TD COLSPAN="2">Mehmet</TD>
  </TR>
  <TR>
    <TD COLSPAN="2">Adres:</TD>
    <TD>Turkiye</TD>
  </TR>
</TABLE>

 

HTML Tablo Oluşturma Sınıfı

<?php
class Tablo{
	var $topla;
	var $say;	
	function Tablo(){
		$ar["border"]="border=0";
		$ar["cellspacing"]="cellspacing=0";
		$ar["cellpadding"]="cellpadding=0";
		$this->args(func_get_args(),$ar);
		$this->topla="<table ".implode(" ",$ar).">";
		$this->say = 0;
	}
	function tr(){
		if($this->say++) $this->topla.="</tr>";
		$this->args(func_get_args(),$ar);
		$this->topla.="<tr ".implode(" ",$ar).">";
	}
	function td(){
		$args=func_get_args();
		$veri=array_shift($args);
		$this->args($args,$ar);	
		$this->topla.="<td ".implode(" ",$ar).">$veri</td>";
	}
	function th(){
		$args=func_get_args();
		$veri=array_shift($args);
		$this->args($args,$ar);
		$this->topla.="<th ".implode(" ",$ar).">$veri</th>";
	}
	function rows(){
		return $this->say;
	}
	function html(){
		if($this->say) $this->topla.="</tr>";
		$this->say = 0;
		return $this->topla."</table>";
	}
	function args($args,&$ar){
		settype($ar,"array");
		foreach ($args as $v){
			if (is_array($v)){
				foreach ($v as $ii=>$vv){
					if(is_string($ii)){
						$n = strtolower($ii);
						if($vv && is_string($vv) && $vv[0]!="'" && $vv[0]!='"') $vv = '"'.$vv.'"';
						$ar[$n] = strlen($vv) ? "$ii=$vv" : $ii;
					}else{
						$n = explode("=",$vv);
						$n = strtolower($n[0]);
						$ar[$n] = $vv;
					}
				}
			}else{
				$n=explode("=",$v);
				$n=strtolower($n[0]);
				if ($v) $ar[$n]=$v;
			}
		}
		return $ar;
	}
}
$tbl=new Tablo("border=1");
$tbl->tr();
$tbl->td("Merhaba","bgcolor=#ffffff","style='color:#000000'");
$tbl->tr();
$tbl->td("Yazılımcı");
print($tbl->html());
?>

Çıktısı

<table border=1 cellspacing=0 cellpadding=0>
    <tr >
        <td bgcolor=#ffffff style='color:#000000'>
            Merhaba
        </td>
    </tr>
    <tr >
        <td >
            Yazılımcı
        </td>
    </tr>
</table>

 

HTML Web Sayfalarına JS Script Oluşturmak

<?php
function jsEkle($adres){
	return "<script language='javascript' type='text/javascript' src='$adres'></script>\n";
}
echo jsEkle("script.js");
echo jsEkle("demo.js");

?>

Çıktısı

<script language='javascript' type='text/javascript' src='script.js'></script>
<script language='javascript' type='text/javascript' src='demo.js'></script>

 

Basit Sayfa Başlangıç Kodları

Html için

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <meta name="description" content=""/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta property="og:locale" content="tr_TR" />
    <meta property="og:type" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:url" content="" />
    <meta property="og:site_name" content="" />
    <meta name="twitter:card" content="" />
    <meta name="twitter:description" content="" />
    <meta name="twitter:title" content="" />
    <meta name="twitter:site" content="@" />
    <link rel="amphtml" href="" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="canonical" href="" />
    <link rel="next" href="" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style type='text/css'></style>
</head>
<body>
	<div class="container-fluid"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript"></script>
</body>
</html>

Php için

<?php
ob_start();
session_start();
header("Cache-Control: no-cache, must-revalidate");  
header('Content-Type: text/html; charset=utf-8');
date_default_timezone_set('Europe/Istanbul');
mb_language('uni'); 
mb_internal_encoding('UTF-8');

if($_SERVER['HTTP_HOST'] == "127.0.0.1"){
	//localhost
	$link = mysqli_connect("localhost","root","rootsifre","dbadi");
}else{
	//www global
	$link = mysqli_connect("localhost","kullaniciadim","şifrem","veritabanim");
	//https yönlendir
	if (!(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) || isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')){
			$redirect = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
			header('HTTP/1.1 301 Moved Permanently');
			header('Location: ' . $redirect);
			exit();
	}
}
if (mysqli_connect_errno()) {
    printf("Baglanti Hatasi: %s\n", mysqli_connect_error());
    exit();
}
if (!mysqli_set_charset($link, "utf8")) {
    printf("Error loading character set utf8: %s\n", mysqli_error($link));
    exit();
}

 

Bütçe Hesaplama

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #container{
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        table td{
            margin: 20px;
        }

        input{
            cursor: pointer;
        }
        #info{
            color:#ff1121;
            font-weight: bold;
        }
        #education .color,#educationBar{
            background: #4986E7;
        }
        #environment .color,#environmentBar{
            background: #16A765;
        }
        #military .color,#militaryBar {
            background: #E9B330;
        }
        #health .color,#healthBar{
            background: #ff1121;
        }
        #crime .color,#crimeBar{
            background: #A076DD;
        }
        .meter{
            background: #555;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
        }
        .meter span {
            background: #eff151;
            border-radius: 5px;
            height: 10px;
            display: block;
        }
        .color{
            width: 25px;
            height: 25px;
            border: 1px #000000 solid;
            float: left;
        }
        .bar{
            width: 50px;
            float: left;
            border: 1px rgba(255, 255, 255, 0) solid;
            margin-left: 10px;
        }

        #chart{
            border: 1px #000000 solid;
            width: 325px;
            height: 250px;
            float: left;
            padding: 10px;
        }

    </style>
</head>
<body>
<div id="container">

    <div id="overAll">
        <table>
            <tr>
                <td style="width: 200px;"> <label>Toplam:  <span id="total"> 0%</span></label> </td>
                <td> : </td>
                <td style="width: 300px">
                    <div class="meter">
                        <span style="width: 0"></span>
                    </div>
                </td>
                <td id="info"> ! Bütçenizi Aşıyor </td>
            </tr>
        </table>
    </div>
    <br>
    <div style="width: 100%;float: left;margin-left: 0px">
        <div id="chart">
            <span id="educationBar" class="bar"></span>
            <span id="environmentBar" class="bar"></span>
            <span id="militaryBar" class="bar"></span>
            <span id="healthBar" class="bar"></span>
            <span id="crimeBar" class="bar"></span>
        </div>
    </div>
    <div id="division" style="float: left;margin-top: 2%">
        <table>
            <tr id="education">
                <td> <label>Eğitim:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="environment">
                <td> <label>Çevre:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="military">
                <td> <label>Güvenlik:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="health">
                <td> <label>Sağlık:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="crime">
                <td style="width: 200px;"> <label>Barınma:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
        </table>
    </div>
</div>
<script>

    $(function(){

        $("#info").hide();
        var education,environment,military,health,crime;
        var total,chartValues;
        $("table").on("change mousemove",function(){
            education = $("#education").find("input").val();
            environment = $("#environment").find("input").val();
            military = $("#military").find("input").val();
            health = $("#health").find("input").val();
            crime = $("#crime").find("input").val();
            total=(Number(education/5)+Number(environment/5)+Number(military/5)+Number(health/5)+Number(crime/5));
            chartValues =[Number(education),Number(environment),Number(military),Number(health),Number(crime)];
            console.log(chartValues);
            valueUpdate();
        });
        function valueUpdate(){
            $("#education").find("label").find("span").text(education+"%");
            $("#environment").find("label").find("span").text(environment+"%");
            $("#military").find("label").find("span").text(military+"%");
            $("#health").find("label").find("span").text(health+"%");
            $("#crime").find("label").find("span").text(crime+"%");
            console.log(total);
            $("#educationBar").css({"height":education+"%"});
            //$("#educationBar").css({"height":education+"%","margin-top":education+"%"});
            $("#environmentBar").css({"height":environment+"%"});
            $("#militaryBar").css({"height":military+"%"});
            $("#healthBar").css({"height":health+"%"});
            $("#crimeBar").css({"height":crime+"%"});
            $("#overAll").find("progress").val(Math.ceil(total));
            $("#total").text(Math.ceil(total)+"%");
            $(".meter").find("span").width(Math.ceil(total)+"%");
            if(total>50){
                $("#info").show();
            }
            else{
                $("#info").hide();
            }
        }
    });
</script>
</body>
</html>

 

Bootstrap ve PureCss ile ModalBox

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://purecss.io/css/main-grid-old-ie.css">
    <link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
    <link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://purecss.io/css/main-grid.css">
<link rel="stylesheet" href="http://purecss.io/css/main.css">
<link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
<link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<!--<![endif]-->
<!--[if lt IE 9]>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
	<div class="content">
		<p>
			<a href="#myModal" role="button" class="pure-button-primary pure-button" data-toggle="modal">
			Aç </a>
		</p>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-header">
				<h3 id="myModalLabel">Başlık</h3>
			</div>
			<div class="modal-body">
				<form class="pure-form pure-form-stacked">
					<label for="email">Email</label>
					<input id="email" type="text" placeholder="Email">
					<label for="state">Cinsiyet</label>
					<select id="state">
						<option>E</option>
						<option>F</option>
					</select>
					<label class="pure-checkbox">
					<input type="checkbox"> Hatırla </label>
				</form>
			</div>
			<div class="modal-footer">
				<button class="pure-button" data-dismiss="modal" aria-hidden="true">Kapat</button>
				<button class="pure-button pure-button-primary">Gönder</button>
			</div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	</div>
</div>
</body>
</html>

Demo için tıklayınız

İçerik Haritasi

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Responsive İçerik Haritasi (BreadCrumb)(Bootsrap veya Materialize Grid Uyumlu)</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
#icerikharitasi {
    text-align: center;
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
}
#icerikharitasi tr td {
    display: inline-block;
    width: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: #3498db;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 30px;
}
@media (max-width: 767px) {
    #icerikharitasi tr td {
        display: block;
        width: 100%;
    }
}
#icerikharitasi tr td:nth-child(1) {
    background-color: rgba(224, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2) {
    background-color: rgba(124, 133, 142, 1);
}
#icerikharitasi tr td:nth-child(3) {
    background-color: rgba(104, 114, 124, 1);
}
#icerikharitasi tr td:nth-child(1):hover {
    background-color: rgba(194, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2):hover {
    background-color: rgba(120, 120, 120, 1);
}
#icerikharitasi tr td:nth-child(3):hover {
    background-color: rgba(100, 100, 100, 1);
}
@media (min-width: 768px) {
    #icerikharitasi tr td:after {
        content: "";
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid rgba(224, 34, 34, 1);
        position: absolute;
        right: -10px;
        top: 40%;
        z-index: 1;
    }
    #icerikharitasi tr td:last-child:after {
        display: none;
    }
    #icerikharitasi tr td:nth-child(1):after {
        border-left: 10px solid rgba(224, 34, 34, 1);
    }
    #icerikharitasi tr td:nth-child(2):after {
        border-left: 10px solid rgba(124, 133, 142, 1);
    }
    #icerikharitasi tr td:nth-child(3):after {
        border-left: 10px solid rgba(104, 114, 124, 1);
    }
    #icerikharitasi tr td:nth-child(1):hover:after {
        border-left: 10px solid rgba(194, 34, 34, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(2):hover:after {
        border-left: 10px solid rgba(120, 120, 120, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(3):hover:after {
        border-left: 10px solid rgba(100, 100, 100, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
}
#icerikharitasi tr td a {
    color: #fff;
    text-decoration: none;
}
#icerikharitasi tr td:hover a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}
</style>
</head>
<body>
<table id="icerikharitasi">
	<tr>
		<td><a href="#1">İçerik 1</a></td>
		<td><a href="#2">İçerik 2</a></td>
		<td><a href="#3">İçerik 3</a></td>
	</tr>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function resicerik() {
    var ih1 = "#icerikharitasi tr td:nth-child(1)";
    var ih2 = "#icerikharitasi tr td:nth-child(2)";
    var ih3 = "#icerikharitasi tr td:nth-child(3)";
    $(ih1).css('height', 'auto');
    $(ih2).css('height', 'auto');
    $(ih3).css('height', 'auto');
    var i1 = $(ih1).height();
    var i2 = $(ih2).height();
    var i3 = $(ih3).height();
    if (i3 > i2) {
        i = i3
    } else if (i3 === i2) {
        i = i2
    } else if (i2 > i1) {
        i = i2
    } else if (i2 === i1) {
        i = i1
    } else {
        i = i1
    }
    $("#icerikharitasi tr td").height(i);
}
$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() > 767) {
            resicerik();
        }else{
            var ih1 = "#icerikharitasi tr td:nth-child(1)";
            var ih2 = "#icerikharitasi tr td:nth-child(2)";
            var ih3 = "#icerikharitasi tr td:nth-child(3)";
            $(ih1).css('height', 'auto');
            $(ih2).css('height', 'auto');
            $(ih3).css('height', 'auto');
        }
    });
});
</script>
</body>
</html>

Demo için Tıklayınız

Form Üzerinden Doğum Günü İşlemleri

<?php
function zaman($deger){
	$z=array();
	if(version_compare(phpversion(),'5.2.0','>=')){
		$zaman = new DateTime($deger);
		$zaman->setTimezone(new DateTimeZone('Europe/Istanbul'));
		$z["yil"]=$zaman->format('Y');
		$z["ay"]=$zaman->format('m');
		$z["gun"]=$zaman->format('d');
		$z["tam"]=$zaman->format('Y\-m\-d');
		$z["damga"]=$zaman->getTimestamp();
		
	}else{
		$sifirla = date_default_timezone_get();
		date_default_timezone_set('Europe/Istanbul');
		$damga=strtotime($deger);
		date_default_timezone_set($sifirla);
		$z["yil"]=date('Y',$damga);
		$z["ay"]=date('m',$damga);
		$z["gun"]=date('d',$damga);
		$z["tam"]=date('Y\-m\-d',$damga);
		$z["damga"]=$damga;
		
	}
	return $z;
}
function dogumTarihi($kacyilonce,$ad=null,$kimlik=null,$sinif=null){
	$once=(date("Y",(time()))-$kacyilonce)."-".date("m-d",(time()));
	$simdi=date("Y-m-d",time());
	return '<input name="'.$ad.'" class="'.$sinif.'" id="'.$kimlik.'"'.
		' max="'.$simdi.'" min="'.$once.'" type="date" />';
}
?>
<form action="" method="post">
<?php echo dogumTarihi(90,"ddlBirthYear","ddlDogumYil"); ?>
<input type="submit" value="Gönder"/>
</form>
<?php

if(isset($_POST["ddlBirthYear"])){
	$zaman=zaman($_POST["ddlBirthYear"])
	print_r($zaman);
	//echo $zaman["tam"];
}
?>

Çıktısı

Array ( [yil] => 2015 [ay] => 03 [gun] => 12 [tam] => 2015-03-12 [damga] => 1426114800 )