HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

WEB Sayfanıza Harita Ekleyin

  Aralık 08, 2021      Serkan YILDIZ

 Web sayfanıza harita ekleyip bu harita içerisinde bazı noktaları işaretlemek, harita üzerine çizimler yapmak istiyorsanız bunu Leaflet uygulaması ile kolaylıkla yapabilirsiniz. Sadece aşadaki HTML kodu kendi sitenize uyarlamanız yeterli. Harita üzerindeki gösterimler için siteyi ziyaret edin, çok basit bir şekilde harita üzerinde istediğiniz tüm gösterimleri yapabilirsiniz. Çok basit, çok hızlı. Aşağıdaki kodda center: alanı koordinat bilgisidir.

<!DOCTYPE html>

        <html>
           <head>
              <title>Leaflet</title>
              <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
           </head>
          <body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
              <script>
                 // Creating map options
                 var mapOptions = {
                    center: [41.332453, 28.577112],
                    zoom: 10
                 }
                 
                 // Creating a map object
                 var map = new L.map('map', mapOptions);
                 
                 // Creating a Layer object
                 var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
                 
                 // Adding layer to the map
                 map.addLayer(layer);
              </script>
           </body>
        </html>

Sayfanızda SSL çalışıyorsa yukarıdaki kodda aşağıdaki link ve script yerine aşağıdaki bölümleri kullanın.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

Ayrıntılı bilgi için : https://leafletjs.com/

HTML Kod Örnekleri

  Aralık 06, 2021      Serkan YILDIZ

  HTML kod içinde çok kullanışlı bazı kod örneklerini burada vereceğiz. PHP veya bunun gibi dinamik kod sistemlerinin yapabileceği birçok basit işlem HTML içinde de yapılabilir. Bunlardan bazılarına değinelim.

HTML Form Alanlarının Boş Bırakılmasını Engelleme

HTML form içinde bulunan herhangi bir değeri zorunlu hale getirmek ve bu zorunlu değer girilmezse hata mesajı verdirmek için aşağıdaki kod örneği kullanılabilir.

<input class="form-control" type="email"  required placeholder="E-Mail"

 oninvalid="this.setCustomValidity('Lütfen geçerli bir E-Mail adresi yazın.')"

 oninput="setCustomValidity('')">

HTML Sayfada Butonla Popup Sayfa Açma

Htlm sayfa içinden bir buton vasıtası ile popup pencere aştırmak için aşağıdaki basit kodu kullanabilirsiniz. Aynı sayfadan birkaç fakrlı popup sayfa açacaksanız her buton için "MyWindow" kelimesi yerine başka birşey yazın. Böylece her buton için faklı popup pencere açılacaktır.

<a href="#" onClick="MyWindow=window.open('http://www.google.com','MyWindow','width=600,height=300'); return false;">Click Here</a>

Bu kod css ve js dosyası gerektirmez, html dosyanız içine yukarıdaki şekilde yazmanız yeterlidir.

Ziyaretciyi HTML kod ile belli bir URL'e yönlendirme. 

<meta http-equiv="Refresh" content="0; url='http://www.google.com'" />

PHP ile Web Server Üzerinden Ping Atma

  Temmuz 03, 2020      Serkan YILDIZ
Aşağıdaki PHP kodunu kullanarak server üzerinden istediğiniz bir web adresi veya IP adresine ping atbilirsiniz. Bu kod windows bir web server için yazılmıştır. Kod da bulunan değişkenlerin değerini değiştirerek veya başka bir yerden bu koda göndererek istediğiniz yere ping atabilirsiniz.

<?php
$host="127.0.0.1";
$count="10";
$timeout="1000";
$size="32";
$ttl="128";
$output=shell_exec('ping -i '.$ttl.' -l '.$size.' -w '.$timeout.' -n '.$count.' '.$host);

echo "<pre>$output</pre>"; 

if (strpos($output, 'out') !== false) {
    echo "Dead";
}
    elseif(strpos($output, 'expired') !== false)
{
    echo "Network Error";
}
    elseif(strpos($output, 'data') !== false)
{
    echo "Alive";
}
else
{
    echo "Unknown Error";
}
?>

IPv4 ve IPv6 ayrımı için koda ekleme yapmak gerekir, default haliyle IP versiyon 4 çalışacaktır.

Dikkat! Bu kod komutları windows command prompt üzerinde çalıştırdığından web server için güvenlik açığı oluşturabilir. Sadece kendi kullanımınız için kullanmayı tercih edebilirsiniz.

HTML CSS Dosyası Nasıl Oluşturulur, Nasıl Kullanılır

  Aralık 28, 2017      Serkan YILDIZ
HTML dosyaların görsel olarak yapılandırılması için style tag'leri kullanılmaktadır. Bu tag içinde çok fazla tanım yapılacak ise her html dosyanın yüklenme süresi ve kapladığı alan artacaktır. Bunun yerine tüm html dosyaları için tek bir CSS hazırlanması ve html içinden çağrılarak kullanılması daha efektif olacaktır.

 HTML dosyası içinde CSS kullanmak için aşağıdaki link kodu kullanılır. Link tag'i her zaman Head başlığı altına yazılır.

  <link rel="stylesheet" href="style.css">

Bu kod style.css dosyası içindeki tanımlarım bu HTML dosyasına aktarılmasını sağlar. style.css dosyası bir text dosyadır ve notepad gibi uygulamalar ile hazırlanabilir.

İlk olarak bir HTML dosyası hazırlayın;

<!DOCTYPE html>
<html>
<head>
  <title>Css Örneği</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
  :: <em>CSS Örnek Uygulama</em> ::
</h1>
</body>
</html>

Yukarıdaki kodlamayı bir dosyaya yazarak cssTest.html olarak kaydedin. Aynı dizine style.css isimli bir dosya daha oluşturun ve aşağıdaki içeriği bu dosyaya yazın.

body {
    background-color: #e3e3e8;
}
h1 {
  background-color: #ff9900;
  position: fixed;
  text-align: center;
}

Html dosyasını açtığınızda arka plan renginin ve h1 tag'i içinde bulunan metnin arka plan renginin css dosyasında tanımlandığı gibi olacağını göreceksiniz. Html tag'lerinin tamamı Css dosyası içinde görsel olarak şekillendirilebilir. Bilinen Html tag'leri için değilde spesifik bir değişiklik yapılacak ise class kodu kullanılır. Ör;

<div class=test>Deneme Mesajı</div>

Burada tanımlanan class'ın Css dosyası içinde özellikleri yazılır. Class'lar başına nokta konularak css dosyası içinde tanımlanırlar.

.test {
   text-align: center;
   color: red;
}

Bu kodlar Html dosyasına eklendiğinde "Deneme Mesajı" sayfa ortasında kırmızı renkte görüntülenir.




HTML içinde Style oluşturma

  Aralık 22, 2017      Serkan YILDIZ
HTML dosya içerisinde bazı özellikleri belirtmek için sytle kodu kullanılır. Bu kod html içinde direk yazılarak kullanılabildiği gibi bir css dosyası referans gösterilerekte kullanılabilir.

Bu kodun üç şekilde kullanımı mevcuttur ve sonuç bu üç kullanım içinde aynıdır. Tekrarlanan kodlar için kullanım kolaylığına göre seçim yapmak gerekir.

1.<head> içinde kullanılan style

Aşağıdaki kodda style kodu head içinde yer almaktadır. Bu kod body içinde bulunan tüm div seçimlerinin yükseklik ve genişliği belirlenmiştir. .stop class'ı kullanılıyorsa arka plan renginin kırmızı olması sağlanmıştır.

<head>
<style>
  div {
    height : 50px;
    width : 50px;
    border-radius: 25px;
  }
  .stop {
    background-color: red;
  }
</style>
</head>
<body>
<div class="stop"></div>
  <div>
    This will have a red background.
  </div>
</body>

2. div kodu içinde style kullanımı.

style kodu div içinde aşağıdaki gibi kullanılır ve sadece yazıldığı div içeriğini etkiler. Sadece bir kez kullanılacak olan özelliklerde tercih edilebilir.

<body>
  <div style="background-color: red">
    Test text.
  </div>
  <div style="background-color: red">
    Test text.
  </div>
</body>

3. Css dosyası içinde style kullanımı.

Html dosyasına bir referans css dosyası eklenerek bu css dosyası içinde style komutlarını kullanarak genel style kullanımları listelenebilir ve bu dosya referans gösterilerek tekrar tekrar yazmadan class'lar ile gösterilebilir.

<head>
   <link rel="stylesheet" href="main.css">
</head>
<body>
  <div>
    This text.
  </div>
</body>

Bu örnekte main.css dosyasına aşağıdaki div içeriği yazıldığında div kullanıldığı durumda arka lanın kırmızı olması sağlanır.

div {
  background-color : red;
}

Arka plana sabit resim koymak isterseniz aşağıdaki kodu kullanabilirsiniz.

<head>
<style>
body {
  background-image: url('1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
</head>

HTML Programlama

  Aralık 14, 2017      Serkan YILDIZ
HTML dosya hazırlamada kullanılan bazı kodelardan bahsedeceğiz. İlk olarak bir HTML dosyanın sahip olması gereken kodlardan bahsedelim.

HTML dosya uzantısı .html veya .htm olmalıdır. Bu dosyaların sahip olması gereken kodlar aşağıdaki gibidir.

<!DOCTYPE HTML>  - Doküman tipini tanımlar. ör: Html  5
<html> - Html  dosya başlangıç kodudur.
<head> - Meta, title, link, java script, css gibi bilgilerin bulunduğu alandır.
<title>Title</title> - Html başlık bölümüdür.
</head> - Head bölümü sonu
<body> - Websayfasının gösterilecek tüm içeriği bu bölümde yer alır.
<b>Content</b>
</body> - Body bölümü sonu
</html> - Html bölümü sonu

Yazı karekterlerinin kalın harflerle yazmak için; <b> kodu kullanılır.

<b>Yazı</b> Çıktısı Yazı şeklindedir.

 İtalik yazı karekteri için <em> kodu kullanılır.

<em>Yazı</em> Çıktısı Yazı şeklindedir.

Alt satıra geçmek için <br> kodu kullanılır.
Paragraf için <p> kodu kullanılır. Kullanımı;

<p>Yazı</p> Şeklindedir.

HTML içinde birçok kod aşağıdaki formatta yazılır.

<tag işlem="değer"> içerik </tag>

Anchor = a = link komutlarına bakalım

<a href="www.serkan.net">Serkan Web Page</a>

HTML dosyaya resim eklemek için 

<img src="url" alt="Açıklayıcı Yazı"> komutu kullanılır.

HTML dosyası web sayfası içindeki genel kuralları belirliyor. Css dosyası ise HTML içeriğinin hasıl görüntüleneceğini belirliyor ve görsel özellikleri yönetiyor. Css dosyası ile yazı tipleri, kalınlıkları, renk, resim boyutları gibi özellikler yönetiliyor. Css dosyası içeriğin istediğiniz formatta görüntülenmesini sağladığı gibi web sayfanıza bir standart getiriyor. Bu dosyadaki tanımları defalarca kullanarak aynı kodları sürekli html içerisinde yazmak zorunda kalmıyorsunuz.






Google