mobile-logo
Top

element Tag

  • All
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz!Grup Seçiciler Stil dosyasında aynı stile sahip elementler mevcut olabilir.h1 { color:green; } h2 { color:green; } p { color:green; }Kodu kısaltmak için,seçicileri gruplayabilirsiniz.Herbir seçiciyi virgül ile...

by

CSS Border Özelliği

CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.

Border Style

border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.

Not;  border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!

border-style değerleri:

none: Çerçevesiz hal

dotted: Noktalı bir çerçeve

dashed: Tirelenmiş kenarlık

solid: Sade, tek renk ve tek çizgi halinde olan kenarlık

double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.

groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.

ridge:3D kabarık çizgi. border-color değerine bağlı.

inset: 3d ilave kenar. border-color değerine bağlı.

outset: 3d ilave kenar. border-color değerine bağlı.

Kendiniz deneyin: Kenarın değerini ayarlama

Kenar genişliği

border-width kenarların genişliğini ayarlamak için kullanılır.

Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.

Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 

Kenar rengi

border-color kenarlara renk vermek için kullanılır. Renkler de:

  • name -belirli bir renk adı ile,mesela “red”
  • RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
  • Hex – belirli bir hex değeri ile,mesela “#ff0000”

Kenar renklerini transparan/”transparent” da yapabilirsiniz.

Continue reading
by

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

  • Bir hex değeri “#ff0000”
  • Bir rgb değeri “rgb(255,0,0)”
  • Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

body {color:blue;}
 h1 {color:#00ff00;}
 h2 {color:rgb(255,0,0);}

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.

Continue reading
by

ID ve Class Seçicileri

HTML elementlerini biçimlendirmenin ötesinde CSS kendi seçicilerinizi id ve class olarak oluşturmanızı sağlar.

ID Seçici

ID seçici yegane tek bir element için stillendirme yapar.

HTML elementinin id özelliğinin değeri kullanılır ve css dosyasında ‘#’ değeri kullanılarak tanımlama yapılır ve biçimlendirilir css’te.

Örnek; menu id’sine sahip element için css yazımı;

#menu
 {
 text-align:center;
 color:red;
 }

ID’yi sayıyla başlatmayın Firefox’ta çalışmaz çünkü.

Class Seçici

Class seçici, html elementler grubunu biçimlendirmek için kullanılır. ID seçicisinin haricinde, class seçici birçok kez kullanılabilir.

Bu da sayılar ile başlamamalı çünkü Internet Explorer desteklememekte.

Aynı class ile belirli birçok HTML elementini şekillendirebilirsiniz.

HTML’nin class özelliğini kullanarak ve css’te başına nokta koyarak tanımlarsınız bu seçiciyi.

Örnekte merkez class’ına sahip bir css stilini göreceksiniz;

 .merkez{text-align:center;}

Şunu da yapabilirsiniz class ile; sadece belirlediğiniz HTML elementlerinin class tarafından etkilenmesini sağlayabilirsiniz.

Mesela tüm p etiketlerine merkez class’ı uygulanır bu da hepsini merkeze alır tanımdan yola çıktığımızda.

p.center {text-align:center;}
Continue reading
by

Web üzerinde video

Şu ana kadar, bir web sayfası üzerinde video göstermenin standardı yoktu.

Günümüzde, flash gibi bir eklenti ile videolar gösterilmekte. Bununla beraber, tarayıcıların hepsi aynı tür eklentilere sahip değiller.

HTML5 video eklemek için bir standart belirlemekte, video elementi ile.

Video Formatları

Varsayılan olarak, video elementince desteklenen 3 tip format mevcut:

FormatIEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No
  • Ogg = Ogg dosyaları Theora video codec’i  ve Vorbis audio codec’i ile çalışır.
  • MPEG4 = MPEG 4 dosyaları H.264 video codec’i ve AAC audio codec’i ile çalışır.
  • WebM = WebM dosyaları VP8 video codec’i ve Vorbis audio codec’i ile çalışır.

Nasıl çalışır?

HTML5’te video göstermek için, ihtiyacınız olan şey:

<video src=”movie.ogg” controls=”controls”>
</video>

Control özelliği oynatmayı eklemek için, durdurmayı, ve de ses kontrollerini…

Continue reading
by

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.

HTML, Head Elementi

Tüm head elementi için bir taşıyıcıdır. <head> elementi içeriğinde; stil dosyası bağı, scriptler, meta bilgisi desteği ve daha fazlasını taşır.

HTML, Title Elementi

<title> etiketi dökümanın başlığını ifade eder.

HTML ve XHTML belgelerinde gereklidir. Title elementi;

  • Tarayıcının araç çubuğunda bir başlık gösterir,
  • Favorilere eklendiğinde sayfa başlığı sağlar,
  • Arama motorlarında sayfa için başlık görüntüler.

Misal;

<html>
<head>
<title>Title of the document</title>
</head>

HTML, Base Elementi

<base> etiketi bir sayfa üzerindeki tüm bağlantılar için bir varsayılan adres veya bir varsayılan hedef ifade eder.

Misal;

<head>
<base href=”http://www.w3schools.com/images/” />
<base target=”_blank” />
</head>

HTML, Link Elementi

<link> etiketi bir döküman ile bir harici kaynak arasındaki ilişkiyi tanımlar. En çok stil dosyasını bağlamak için kullanılır.

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

HTML, Style Elementi

Continue reading

by

Yine yazılı bir izin olmaksızın alıntı yapma yasağı var bu kitapta. Bu yüzden içeriğinden alıntı yapmadan anlatacağım ancak.Kitap; Dikeyeksen Yayıncılık tarafından basılmış, Şubat 2011 birinci baskısı.  Sayfa ve baskı kalitesi çok yüksek. 239 sayfa. Ertuğrul Haskan'ın özverili çalışması ile hazırlanmış. İlk baştaki yazma amacı herkesin...

by