Top

html Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

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;}

Css öğrenmeye başlamadan önce  HTML veya XHTML bilmeniz gerekmektedir. Bilmiyorsanız buraya tıklayarak öğrenmeye başlayabilirsiniz.

Css Nedir?

Css yığma stil dosyasıdır.

  • Stiller HTML elementlerinin nasıl gösterileceğini tanımlarlar.
  • Stiller bir problemi çözmek için eklenmişti HTML 4.0’a.
  • Harici Stil dosyaları birçok işten kurtarır.
  • Harici stil dosyaları CSS dosyalarında tutulur.

CSS’e ait bir demo var. Bunu görüntülemek için buraya tıklayın; ilk üçü farklı stillere sahip, without yazan stilsiz görünüm ve alttaki üçü de stil dosyalarının içerikleridir.

Stilleri büyük bir problemi çözdü

HTML, bir belgeyi biçimlendirmek için etiketler içeren bir şekilde tasarlanmamıştı.

Bir belgenin içeriğini belirlemek için tasarlanmıştı; tıpkı:

<h1>Bu bir başlık</h1>
<p>bu bir paragraf</p>

HTML 3.2’de <font> etiketi gibi etiketler eklendiğinde web geliştiricileri için bir kabus oldu bu durum. Büyük siteleri geliştirmek, fontları ve renk bilgilerini tek tek er sayfa için değiştirmek uzun ve pahalı bir süreç haline geldi.

Bu problemi çözmek içinse; WWW konsorsiyumu CSS’i oluşturdu.

HTML 4.0’da tüm formatlar HTML belgesinden arındırıldı ve ayrı bir css dosyasında barındırılmaya başlandı.

Günümüzde tüm tarayıcılar css’i desteklemekte.

CSS bizi iş yükünden kurtardı

CSS HTML elemanlarının nasıl gösterileceğini tanımlar.

Bu sayede birçok sayfaya bağlı olan css dosyasını değiştirdiğimizde tüm sayfalarımız da değişecektir. Bizleri uğraştan kurtaracaktır.

 

XHTML HTML’nin ve XML’in (EXtensible Markup Language)  karışımından oluşur.

XHTML; HTML 4.01’in tüm elementlerine dayanır, XML’in katı söz dizimini de içerir.


Neden/nedir XHTML?

İnternet üzerindeki çoğu sayfa düzgün olmayan yani kötü html’e sahiptir.

Bir tarayıcıda görüntülerken alttaki kodlar düzgün görüntülenecektir. (HTML kurallarına uymasa dahi):

<html>
<head>
<title>Bu düzensiz HTML</title>
<body>
<h1>düzensiz HTML
<p>Bu bir paragraf
</body>

XML bir işaretleme dili ve herşeyin düzgün işaretlenmesi gerekir ki bu tür belgelere de well-formed yani düzgün biçimli belgeler denir.

XML verileri tanımlamak için tasarlanmıştır, ve HTML verileri görüntülemek için.

Farklı firmalara ait tarayıcıların günümüz pazarında , kimisi bilgisayarlarda çalışmakta kimisi de mobil cihazlar gibi küçük cihazlarda çalışmakta. Son bahsettiğimizde herhangi bir güç ya da kaynak yoktur  düzensiz HTML’i düzeltecek.

Bununla birlikte -HTML ve XML’in birleşimi, W3C tarafından gelecek için ve şu an için en yararlı olan işaretleme dili olduğudur – XHTML.

HTML5 hataları nasıl ayıklayacağının ve  nasıl tüm html elementlerini kullanıp kuralların kestiriminde bulunarak birlikte çalışabilirliği artırmakta ve geliştirme maliyetini azaltmayı hedeflemekte.

Yeni html5’in bazı özellikleri; ses, video, grafik, sunucu taraflı veri depolama ve interaktif belgeler için işlevler. Hatta nav, header, footer ve figure gibi elementler de içermekte.

HTML5 çalışma grupları AOL, Google, IBM, Microsoft, Mozilla, Nokia, Opera ve yüzlerce satıcıdır.

Not; HTML5 henüz bir W3C tavsiyesi değildir!

‘Yeni’ yazanlar HTML5’teki yeni elementlerdir.


Alfabetik olarak sıralanmış tüm HTML etiketleri, işte referans noktanız!;

HTML5 ses dosyaları çalmak için de bir satandart sunmakta.


Web’te ses/audio

Şu ana kadar, web sayfaları üzerinde ses çalmak için bir standart yoktu.

Günümüzde ise, çoğu ses parçası flash gibi eklentilerle çalışmakta. Bununla beraber, tüm tarayıcılar aynı eklentiyi desteklememekte.

HTML5 audio elementi ile bir ses parçası standardı getirmekte.

Audio elementi ses parçalarının çalınmasını sağlar, veya bir ses akışının çalınmasını.


Audio Türleri

Varsayılan olarak, audio elementine uygun 3 tür mevcut:

Tür IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis Hayır Evet Evet Evet Hayır
MP3 Evet Hayır Hayır Evet Evet
Wav Hayır Evet Evet Evet Evet

 


Nasıl Çalışır

Ses çalabilmek için tüm ihtiyacınız olan şey:

<audio src=”song.ogg” controls=”controls”>
</audio>

Control özelliği play, pause, ve volume gibi yani çal, duraklat ve ses gibi kontrol düğmelerini sağlar.

<audio> ve </audio> etiketleri arasına audio elementini desteklemeyen tarayıcılar için uyarı yazsıı konulabilir.

Yukarıdaki Ogg dosyası örneği Firefox, Opera ve Chrome’da düzgünce çalışmaktadır.

Internet Explorer ve Safari’de de çalabilmesi için  türü mp3 olan bir dosya eklemelisiniz.

Audio elementi çoklu kaynağa sahip elementleri kabul etmekte. Source(kaynak) elementleri farklı ses dosyalarına bağlanabilmekte. İlk tanınan formatı çalacaktır tarayıcılar:

 

Tüm <audio> Özellikleri

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:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.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…

HTML 4.01 1999’da standart olduğundan beri internet epey değişime uğradı.

Günümüzde, bazı HTML 4.01 elementlerinin ya modası geçti ya hiç kullanılmadı ya da amacının dışına çıktı kullanımı. Bu elementler de yeni HTML 5’te yeniden yazıldı ya da kaldırıldı.

Günümüzün internet kullanımının üstesinden daha iyi bir şekilde gelme, HTML5’in yapı için yeni elementlerin,çizim, medya içeriği, ve daha iyi form işleme ile mümkün.


Yeni işaretleme elementleri

Daha iyi bir yapı için elementler:

Etiket Tanım
<article> Harici bir kaynağa ait içerik için kullanılır. Blog, forum içeriği gibi.
<aside> İçeriği çerçeveler ve içeriğin yer aldığı yerdedir.
<command> Bir buton, radyo butonu ve bir onay kutusu için.
<details> Bir belge veya belge parçası için ayrıntıları ifade eder.
<summary> Bir başlık, veya özet, element içindeki ayrıntılara dair
<figure> Bir bölümün yerleşik içeriğinin gruplanması, misal video
<figcaption> Figure bölümü(section) için başlık
<footer> Bir belge veya bölümün footer kısmı için, yazarın adını içerebilir, belgenin tarihini de, iletişim bilgilerini de, veya kullanım haklarına dair ibareler de…
<header> Bir belge veya bölümün için tanıtım kısmı için, navigasyon yani yönlendirme menüsünü de içerebilir.
<hgroup> Başlıkların bir bölümüdür,  <h1> den <h6> ya kadardır, en büyük olan bölümün başlığı olur, ve diğerleri de alt başlık olur.
<mark> Yazıları vurgulamak için
<meter> Ölçü birimi için, en düşük ve en  yüksek değerleri bildiğinizde kullanırsınız.
<nav> Navigasyon bölgesi için
<progress> Bir çalışmanın sürecine dair bilgi verir. Flash’taki loading meselesi…
<ruby> Ruby için(Cince karakterler ve noktalamalar da dahil)
<rt> Ruby notuna dair açıklama için
<rp> Ruby elementini desteklemeyen tarayıcıların ne göstereceğini belirtiriz.
<section> Belgedeki bir bölge. Bölümler, başlıklar, footers veya belgenin diğer bölümleri
<time> Zaman ya da tarih tanımlamak için ya da her ikisi…
<wbr> kelime sonu. Satır sonu nun alternatifi.

 


Yeni medya elementleri

HTML5 yeni medya standartları sunmakta:

HTML, XHTML ve HTML Dom ‘da yeni standart HTML 5 olacaktır. Bir önceki versiyon 1999’da çıkmıştır. O zamandan bu yana ise çok şey değişmiştir.

HTML5 hala bir değişim sürecinde. Bununla beraber çağdaş birçok tarayıcı bazı HTML5’e ait  standartları sunmakta.


HTML5, W3c(World Wide Web Konsorsiyumu) ile WHATWG(Web Hypertext Aplication Technology Worgking Group) ‘un ortak çalışmasının sonucu.

WHATWG web formları ve uygulamaları ile, W3C de XHTML 2.0 ile uğraşıyordu. 2006’da, yeni bir HTML versiyonunda birleşmeye karar verdiler.

Belirlenmiş bazı HTML5 kuralları;

  • Yeni özellikler HTML,CSS, DOM ve Javascript’e göre olmalı,
  • Harici eklentilere ihtiyaç azaltılmalı,
  • Daha iyi hata işleme,
  • Script’leme yerine daha fazla işaretleme,
  • HTML5 cihazlardan bağımsız olmalı,
  • Geliştirme süreci halk tarafından görünür kılınmalı

Bir vefa borcu ve alıştırma/uygulama yapmak için HTML Örnekleri w3schools.com üzerindeki editörler aracılığı ile, buraya tıklayarak ulaşabilirsiniz. HTML Referansları da burada yer almaktadır. Şimdiye kadar anlatmış olduklarım ile HTML sayesinde kendi web sitelerinizi yapabilirsiniz. HTML evrensel işaretleme dilidir WEB üzerinde. Text biçimlendirme, grafik ekleme, bağlar oluşturma yani linkler,...

Ç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, Web Sunucuları

Ürettiğiniz web sitesini tüm dünyaya duyurmak ve 7/24 sunmak için web sunucu üzerinde depolamanız gerekmektedir.

Bu durum 3 tip maliyet doğurur;

Donanım maliyeti;

Gerçek bir web sitesi için; birtakım güçlü sunucu donanımı alma ihtiyacı doğurur. Düşük fiyatlı bir bilgisayarın bunu yapabileceğini düşünmeyin. Çünkü 24 saat ve devamlı yüksek bağlantıda çalışması gereklidir.

Yazılım maliyeti;

İstemcilerin yani sıradan bilgisayar kullanıcılarının sahip olması gereken lisansların (programların herbir tanesinin lisansı olur.) da kat be kat üzerinde tutar sunucuların(server’ların) yazılımlarının lisansı. Sunucu lisansları aynı zamanda kullanıcı limitine de sahip olabilir. Buna dikkat etmeniz gereklidir.

Emek maliyeti;

Düşük emek harcanacağını sanmayın. Kendi donanım ve yazılımınızı kurarsınız, bug’lar ile virüsler ile uğraşırsınız ve server’ı daima herşeyin olabileceği bir ortamda açık, çalışır tutmak zorundasınızdır.

İnternet servis sağlayıcı kullanmak