16 Ağustos 2017 Çarşamba

HTML Notlarım: #5 HTML'de Çift Tırnak ve Boşluk Etiketini Kullanma

Merhaba arkadaşlar, bu paylaşım da ağır olarak sözel içerecek neredeyse.. Bu sefer anlatacağım konu; HTML'de çift tırnak ve boşluk etiketini kullanma olacak. Biz her ne kadar kelimeler arasında boşluk bıraksak da HTML bunu tek boşluk olarak algılayacak. Bunun önüne geçebilmemiz için hangi etiketini kullanacağımızı yazıyorum.

nbsp;

Yukarıda ki kodumuz HTML içinde kodu tekrarladığımız takdirde istediğimiz kadar boşluk bırakmamızı sağlıyor.



Bu kodumuz da ise çift tırnak bırakabiliyoruz..

quot;

Kendiniz örnekler yaparak, etiketleri aklınızda tutabilirsiniz..






HTML Notlarım: #4 Heading Etiketi

Yavaş yavaş kodlamayı öğrenmeye başlayalım, ilk olarak paragraf etiketinin nasıl yapacağımızı öğrenmiştik. Bu sefer ise heading yani başlık etiketlerini öğreneceğiz. Akılda tutması gayet basit, h1 diye başlıyor ve h6'ya kadar gidiyor. Ayrıca heading etiketleri seo açısından da önemli, bir makale yazarken ne kadar çok heading etiketleri kullanırsak bizim için o kadar iyidir. (bu konuda kesin bir bilgim yoktur, öyle söyleniyor) Şimdi kodlamaya gelelim.

H1 etiketi en büyük başlık, H6 etiketi ise en küçük başlıktır. Yani H'nin yanında ki sayı değeri büyüdükçe, başlık boyutu küçülür. Aşağıda şekildeki gibi heading etiketlerini kodlayabiliriz.



Etiketlerin çıktısı da şu şekilde olacaktır.



Bu temelleri sağlam atalım ki binamızın üstüne kat çıkabilelim.. Hoşça kalın..:)

13 Ağustos 2017 Pazar

Bardak Nedir?

Bardak içeceğimiz içecekleri tüketmek için kullanılır genellikle de camdan yapılmış olan bir mutfak eşyasıdır. Birçok çeşitli malzemeden yapılan bardaklar vardır. Bunlar; karton bardak, cam bardak, plastik bardak gibi çeşitleri vardır. Mutfaklarımız da genel olarak cam bardak kullanılır. İşyeri, ofis, cafe gibi yerlerde ise plastik ve karton bardak daha çok tercih edilir. Plastik ve karton bardaklar tek kullanımlıktır, kullanıldıktan sonra atılması gerekir. Gelelim cam bardak çeşitlerine. Bazı içeceklerin içilmesi gereken farklı türde cam bardak vardır. Örneğin Çay bardağı. Çay içerken genellikle çay bardağı kullanılır. Çay bardağı orta kısımı ince belli silindir şeklinde olan cam malzemesinden yapılmış bir bardak türüdür. Bardak çeşitleri arasında bira bardağı da yer almaktadır. Çoğunlukla bira ve şarap gibi alkollü içeceklerin tüketildiği yarım litre (500ml-1/2l litre) boyutunda cam malzemesinden üretilen büyük boyda bir bardaktır. En çok kullanılan bardak ise su bardağıdır. Su bardağı sadece su içerken değil, ayran kola ve gazoz gibi soğuk içecekleri içerken kullandığımız cam malzemesinden yapılan 200-250 ml hacminde üretilen bir bardak çeşitidir.

HTML'de Türkçe Karakter Sorunu

Kodlamaya başladık iyi hoş da, yazdığımız kodu tarayıcımız da çalıştırdığımız zaman Türkçe karakterlerinin yerine soru işaretinin çıktığını görüyorsanız şu an doğru konuyu okuyorsunuz. Çözüm çok basit...

<meta charset="UTF-8"/>

Yukarıda verdiğim kodu, head bölümüne yani tarayıcımızın arka planında kodları çalıştırdığı ziyaretçinin görmediği bölüme yazıyoruz. Ve Türkçe karakter sorunu ortadan kalkmış oluyor.

HTML Notlarım: #3 Kodlamaya Başlıyoruz

HTML dosyasını nasıl açarım?

Öncelikle bilgisayarımıza kurduğumuz editörümüzü veya not defterini açıyoruz. Ve farklı kaydet ile dosya uzantısını HTML yapıp bir klasöre kaydediyoruz..

Sözeli bırakıp az da kodlamaya başlayalım değil mi? Aşağıda ki fotoğraf da HTML'nin temel iskeleti buluyor. Bir HTML dosyası oluşturduğumuz da bu kodları zorunlu olarak yazmamız gerekiyor.

Bir web sitesi kodlarken etiketleri nasıl yazacağımızı tekrar hatırlayalım..

<etiketadı>İçerik</etiketadı>

İlk etiket olarak "p" etiketini yazdım. İsimini İngilizce olan "Paragraph" yani dilimiz de "Paragraf" ın ilk harfinden almıştır. Anlayacağınız üzere paragraf oluşturmamızı sağlar.



Yazdığımız kodu çalıştıralım çıktısı aynen şu şekilde olacaktır.



Title etiketinin içine yazdığımız yazı; sayfamızın başlığı olacaktır. :)

Çıktı da Türkçe karakter sorunu olursa eğer, bu yazıma bakabilirsiniz..

Şimdilik bu kadar arkadaşlar, bu kodları ezberlemeye çalışalım. Hoşça kalın.. :)

HTML Notlarım: #2 HTML'in Genel Yapısı

HTML'nin önceki yazımda ne olduğunu, ne işe yaradığını ve nerelerde nasıl kullanacağımızı anlatmıştım. Bu yazımız da HTML'nin Genel Yapısına değineceğim.

Öncelikle bilmemiz gereken 4 tane ana kod var. Bunlar sırasıyla; <html> <head> <title> ve <body> kodudur. Bunlara bir değinelim..

<html>
Tarayıcıya HTML belgesinin başladığını ve bittiği yeri bildirir. Bütün HTML kodlarımızı bunun içerisine yazacağız.

<head>
HTML belgesinin ilk bölümüdür. Tarayıcıda ziyaretçiye gözükmeyen ama arka kısmında bir çok önemli görevi yerine getiren özellikleri mevcuttur. Sekme başlığı ve iconu, stil(css) ve javascript tanımlamaları,etiketleri, karakter kodlaması, tarayıcıya ve arama motorlarına yön verecek etikleri buraya yazarız.

<title>
Head bölümü'nün için de yer alır. Görevi ise tarayıcıların sol üst bölmünde bulunan başlık çubuğunda görüntülenir. Kısacası sayfa başlığı :)

<body>
Tarayıcımızı açıp bir web sitesine girdiğimiz takdirde gördüğümüz tüm yazılar, resimler vb. burada kodlanmıştır.

Peki HTML'de etiketler nasıl yazılır?

HTML içinde kullanılan tüm etiketler "<" işareti ile başlar ve ">" ile biter.
Etiketin yorum aralığından sonra "</etiketinismi>" kalıbı ile bitirilir. Ben yazarken karıştırdım anladınız mı bilemem :)

Kısaca; <etiketismi>...</etiketismi> şeklinde yapılır..

Bir sonraki yazım da kodlamaya geçeceğiz, görüşmek dileğiyle.. :)

Head: Başlık
ve <body> kodudur. Bunlara bir değinelim..vekododur. Bunlara bir değinelim.. <html> Tarayıcıya HTML belgesinin başladığını ve bittiği yeri bildirir. Bütün HTML kodlarımızı bunun içerisine yazacağız. <head> HTML belgesinin ilk bölümüdür. Tarayıcıda ziyaretçiye gözükmeyen ama arka kısmında bir çok önemli görevi yerine getiren özellikleri mevcuttur. Sekme başlığı ve iconu, stil(css) ve javascript tanımlamaları,etiketleri, karakter kodlaması, tarayıcıya ve arama motorlarına yön verecek etikleri buraya yazarız. <title> Head bölümü'nün için de yer alır. Görevi ise tarayıcıların sol üst bölmünde bulunan başlık çubuğunda görüntülenir. Kısacası sayfa başlığı :) <body> Tarayıcımızı açıp bir web sitesine girdiğimiz takdirde gördüğümüz tüm yazılar, resimler vb. burada kodlanmıştır. Peki HTML'de etiketler nasıl yazılır? HTML içinde kullanılan tüm etiketler "<" işareti ile başlar ve ">" ile biter. Etiketin yorum aralığından sonra "</etiketinismi>" kalıbı ile bitirilir. Ben yazarken karıştırdım anladınız mı bilemem :) Kısaca; <etiketismi>...</etiketismi> şeklinde yapılır.. Bir sonraki yazım da kodlamaya geçeceğiz, görüşmek dileğiyle.. :) Head: Başlık Body: Gövde
Body: Gövde

HTML Notlarım: #1 HTML Nedir?

Html Nedir?

HTML'in açılımı "Hyper Text Markup Language" yani; "Biçimlendirilmiş Metin Dili" anlamına gelmektedir.


Html Ne İşe Yarar?

HTML, internet üzerinde web sayfası oluşturmak için kullanılan bir dildir. Kendi başına sade bir web sitesi yapılabilir, .css dahil olmak üzere. Eğer dinamik bir web sitesi yapmak istiyorsak; php, asp gibi diğer yazılım dillerini de öğrenmek gerekiyor. Kısacası HTML; bir web sitenin iskeletini oluşturur.

Dinamik ve Basit Web Sitesinin Farkı Nedir?

Basit bir web sitesi; sadece temel HTML kodları iler oluşturulmuş, bir kaç css özelliği ile şekil verilmiş sitelere denir. Bu tür siteler de güncelleme yapılamaz, yapmak istiyorsak tekrar kod halinde yazmamız gerekir.

Dinamik web sitesi ise; PHP, .NET  gibi uzman yazılım dilleri aracılığıyla kodlanmış profesyonel sitelerdir. Mesela bunlar da admin paneli olur; site yöneticisi buradan kod yazmaksızın siteye; haber, yazı, resim ekleyebilir.

Biz öncelik olarak web sitesinin iskeletini oluşturan HTML'i öğreneceğiz. Umarım ilerleme katederiz.


Peki HTML öğrenmek için hangi programı kullanacağız?

Windows ortamında çalışan ücretli/ücretsiz bir çok profesyonel editörler vardır.

Ücretsiz olarak benim bildiğim Notepad++. Ben Notepad++'ı kullanıyordum, şu ana kadar bir sorun ile karşılaşmadım. Ayrıca Zen Coding eklentisi ile kod yazma hızınızı arttırıyor. Microsoft'un editörü olarak WebMatrix'i öneririm.

Ücretli olarak da Adobe Dreamweaver, ve NoteTab var. Bu editörlerin 30 günlük deneme sürümünü indirip kullanımınıza bağlı olarak satın alabilirsiniz. Gerçi bir çoğumuz crack'ını buluyoruz. :)

Linux(Ubuntu) işletim sistemi için de; Geany ve Brackets'i öneriyorum. Yani benim kullandığım ve bildiğim editörler bunlar. Geany sade bir arayüzü var, Brackets'in de canlı ön izleme özelliği var bildiğim kadarıyla.

Bir tane editör edindikten sonra sıra geliyor kullanacağımız tarayıcılara, bir den fazla tarayıcı kullanırsanız iyi olur. Kodladığınız sitenin nasıl göründüğüne bakabilirsiniz..

Firefox için eklentiler.
Tarayıcımız da kullanabileceğimiz ve ilerleyen zamanlar da işimize yarayabilecek bazı eklentiler mevcut.

Bunları yazıyorum;
1- Firebug

Bildiğim kadarıyla, sitenin bölüm bölüm neyle kodlandığını gösteriyor. Yani açıkcası şu anlık pek kullanmıyorum, siz bakarsınız işte. :) Bu linkten indirebilirsiniz.

2- MeasureIt Developer

Bu eklenti ise ekranda ki herhangi bir nesnenin boyutunu ölçmemize yarıyor. Bu linkten indirebilirsiniz.

3 - ScreenGrab

Açık olan sayfanın komple resim halinde kaydediyor. Normal versiyon belki çalışmayabilir, bu yüzden fix version'u indirelim. Bu linkten indirebilirsiniz.

Bir sonra ki yazımda görüşmek üzere, hoşça kalın.. :)

Text: Metin
Markup: Biçimlendirme
Language: Dil