Web Tabanlı Programlama – İşaretleme Diline Giriş (HTML)

2. İşaretleme Diline Giriş (HTML)

İnternet’in nasıl çalıştığı ve web teknolojilerinin neler olduğu hakkında bilgi sahibi olduk. Bu ünite ile örnek bir web sayfasının temellerini oluşturmaya başlıyoruz.

Ön Hazırlık

Kodlama yaparken yararlanabileceğimiz birçok editör var. Biz bu bölümde iki editörü tanıtacağız.

Bu editörler dışında öğretmeninizin önerdiği editörleri de kullanabilirsiniz.

I. https://www.w3schools.com/ Adresindeki Web Sitesi: Öncelikle siteye bağlandıktan sonra HTML kodların yazılabileceği ekrana bağlanmak için yeşil butona tıklıyoruz. Ya da QR Kodunu mobil aygıtınızdan okutabilirsiniz.

www.w3schools.com editörü

II. NotPad++ Editörü: Çeşitli dilleri destekleyen ücretsiz kaynak kodu düzenleyicisidir. https:// notepad-plus-plus.org/ adresinden kişisel bilgisayarınıza indirip kolayca kurulum yapabilirsiniz.

Notpad editörünün genel görünümü

Editörler hakkında bilgi sahibi olduk. Şimdi çalışma dizinimizi hazırlayalım. Öncelikle, masaüstüne ismimize ait bir dizin oluşturalım. Yapacağımız bütün uygulamaları dosya uzantısı .html olacak şekilde (Ör: “dosyaismi”.html) bu dizin içerisine kaydedeceğiz.

HTML

HTML, Hiper Metin İşaretleme ya da Biçimlendirme Dili (Hyper Text Markup Language) olarak Türkçe’ye çevrilmiştir. Web sitesi oluşturmak için kullanılan standart dildir. İlerleyen bölümlerde başka dillerle de tanışacağız. Şimdi, HTML kodlarının nasıl çalıştığını kavramaya çalışalım.

Notpad editörünün genel görünümü2

Resimdeki kodu istediğiniz bir editörü kullanarak yazınız.

Dikkat!

Kodların yazılırken küçük büyük işaretleri <> arasına <html>, <p>, <body> gibi kod yazıldığını fark ettiniz mi?

Herhangi bir koda başlarken < > işaretlerini, kodu bitirirken </ > işaretlerini kullandığımızı fark ettiniz mi?

Kodları çalıştırınız ve ekran çıktısını inceleyiniz.

Dikkat!

Sadece siyah renkteki yazıların çıktı olarak sunulduğunu fark ettiniz mi?

<!– –> işaretleri arasındaki yazılı metinlerin sayfada görüntülenmediğini fark ettiniz mi?

Resim Ekleme

Şimdi birlikte bir resmin web sayfasına nasıl eklendiğine bakalım. Web sayfamıza <img> kodunu kullanarak resim ekleyebiliriz. Öncelikle İnternet’ten kendi ilgimize göre bir resim bulalım. Konumuz kodlama olduğu için Google’da görsellerden “web programlama” anahtar kelimesi ile arama yapıyoruz. İlgimizi çeken herhangi bir resme sağ tıklayarak resim adresini kopyalıyoruz.

resim ekleme

Dikkat!

Yeşil renkteki yazıların web sayfasında görüntülenmediğini fark ettiniz mi?

< > işaretleri arasına birden fazla kod yazılabildiğini fark ettiniz mi?

Kodu çalıştırdığınızda resim ve yazının alt alta olduğunu göreceksiniz. Peki bunları yan yana nasıl getirebiliriz? Bunun birçok yolu var. Fakat başlangıç aşamasında olduğumuz için sadece resmi sağa ya da sola yaslamamızı sağlayan float komutunu göreceğiz.

Resim eklerken resmin genişliği (width) ve yüksekliğini (height) belirtmek için style kodunu kullanmıştık.

Resmi sağa ya da sola yaslamak için de yine bu kodun içerisine float:left; kodunu ekliyoruz ve kodu test ediyoruz.

Eğer kodu çalıştırdıysanız resim ile yazının bitişik durduğunu fark etmiş olmalısınız. Resim ve yazı arasında boşluk bırakmak istediğimizde ise margin:50px; komutunu style kodu içerisine ekliyoruz.

Fakat bu kez resmin üstünde-sağında-solunda ve altında boşluklar oluştu. Biz sadece yazı ile boşluk olsun istiyorduk. Bunun için margin kodunda bir değişiklik yapmamız gerekiyor.

margin:50px kodunu margin-right:50px olarak değiştirdiğimizde istediğimiz sonuca ulaşacağız.

resim ekleme2

Başka Bir Sayfaya Bağlantı (Link) Verme

Öncelikle bu işlem için gerekli olan kodumuzu tanıyalım. HTML ile sayfalar arası bağlantı (link) vermemizi <a> </a> kodu sağlar.

Bu iki kod arasına, üzerine tıkladığımızda bizi farklı bir sayfaya yönlendirecek metni ya da resmi ekliyoruz.

<a>Kodlama Öğreniyorum Sayfası</a>

Daha sonra href ile yönlendirilecek sayfayı yazıyoruz.

<a href=”https://www.w3schools.com”>Kodlama Öğreniyorum Sayfası</a>

Yönlendirilen sayfanın farklı bir sekmede açılmasını istiyorsak target=”_blank” kodunu kullanıyoruz.

<a href=”https://www.w3schools.com” target=”_blank”>Kodlama Öğreniyorum Sayfası</a>

HTML5

Tim Beurners Lee Web’i icat ettiğinden bu güne kadar hem İnternet kullanıcılarının hem de kodlayıcıların ihtiyaçları değişmiştir. Buna yönelik olarak Web’i programlarken kullanmış olduğumuz diller de kendilerini güncellemektedir. Şuan en güncel html sürümü HTML5’tir. Eski HTML sürümlerinde siteyi tasarlamış olduğunuz kodların bazıları farklı web tarayıcıları tarafından desteklenmiyordu. HTML5, tüm modern tarayıcılarda desteklenir. Aynı zamanda tek bir doğru kodlama şekli yoktur. Aşağıdaki kodların hepsi en son güncel tarayıcılar tarafından çalıştırılabilir. Böylece kodlayıcının işi daha kolaylaşmış olur.

<input type=”text” value=”John” disabled>
<input type=”text” value=John>
<input type=”text” value=”John Doe”>
<input type=”text” value=’John Doe’>

HTML5’te, var olan etiketler (kodlar) dışında etiketler yaratabiliriz (Örneğin isminizi bir etiket olarak kodlayabilirsiniz). Bu özellik, kodlayıcılara kendilerine özgü kodlama yöntemleri geliştirmelerine olanak sağlar.

html yeni nesne

HTML5, bir web sayfasının farklı bölümlerini tanımlamak için yeni anlamsal etiketler sunar. Anlamsal etiket; <video>, <form> gibi içeriği hakkında fikir sahibi olduğumuz elementlerdir. Yani ne tür bir kaynağı etiketlediği açıktır. Anlamsal olmayan elementler ise <div>, <p> gibi içeriği hakkında fikir sahibi olamadığımız elementlerdir. Yani içerisine birçok farklı türden kaynak alabilir. HTML5 ile <header>, <nav>, <section>, <article>, <footer>, <figure>, <mark>, <details>, <progress>, <dialog> gibi yeni anlamsal elementler sunulmaktadır. Şimdi bu elementleri tanıyalım.

html5 elementler

1. UYGULAMA

Notpad++ editöründe aşağıdaki basamakları takip ederek kodlama yapalım.

1) İlk olarak genel sayfa yapısını oluşturuyoruz.

lk olarak genel sayfa yapısını oluşturuyoruz  Yukardaki kodu incelediğimizde sayfamız bir bölüm (<section>) ve altbilgiden (<footer>) oluşuyor. Bölüm içerisinde bir başlık etiketi (<header>), iki makale içeriği etiketi (<article>) var. Altbilgi içerisinde ise yine bir başlık ve gezinim etiketi (<nav>) var.

2) Şimdi bölüm içeriğini kodluyoruz.

imdi bölüm içeriğini kodluyoruz.

Bölümün başlık etiketi içerisine bir resim eklemek için ilk olarak <figure> etiketini açtık. Daha sonra, öğrenmiş olduğumuz <img> etiketini kullanarak bir resim ekledik. Resmin başlığı ya da açıklaması için <figcaption> etiketini kullandık. Son olarak bölümün başlık etiketini kapattık.

Bölüm içerisine bir içerik, açıklama metni, bilgi eklemek istediğimizde <article> etiketini kullandık. Daha sonra, yine <header> etiketi içerisine <h1> etiketini kullanarak içeriğin ya da makalenin başlığını ekledik. Son olarak makale metnini <p> etiketi içerisine ekledik ve <article> etiketini kapattık.

3) Şimdi de sayfanın alt bilgisini kodluyoruz.

imdi de sayfanın alt bilgisini kodluyoruz.

Altbilgi ( <footer> )etiketi içerisinde başlık ve gezinim bağlantıları yer alıyor. Gezinim bağlantılarını
<nav> etiketi içerisine yazdık. Bağlantıları daha önce öğrenmiş olduğumuz <a> etiketi ile verdik. Şimdi sıra sizde kodlamanız sonucunda aşağıdaki gibi bir çıktı elde etmiş olmalısınız.

uygulama ekran görüntüsü

2. UYGULAMA

uygulama2

ÇOKLU ORTAM İÇERİK EKLEME

Sitenize HTML5 ile eklemiş olduğunuz mp4 video ve mp3 ses biçimleri şu anki mevcut tarayıcılar tarafından çalıştırabilir. Kodlamaya geçmeden önce İnternet’ten sitenize eklemek istediğiniz bir video ve sesi kendi isminizle oluşturmuş olduğunuz dizine indiriniz.

1. UYGULAMA

uygulama3

Video ya da ses etiketleri içerisinde çeşitli kodlar

<source> kodu içerisine video ya da sesin nerede olduğunu belirtirken dikkat edilmesi gereken önemli bir nokta var. Aşağıdaki kod, kaynağın olduğu yeri belirtir.

src=”mov.bbb.mp4″

Bu durumda kodlamanın yapıldığı dosyanın kayıt edildiği dizin aynı olmalıdır. Dizinler farklı ise aşağıdaki şekilde kodlama yapılmalıdır.

src=”dizinismi/mov.bbb.mp4″

Peki, youtube gibi bir sosyal ağ sitesinden sitemize video eklemek istendiğinde ne yapılabilir? İşte bu durumda HTML5’teki <video> etiketi yerine başka kodlara ihtiyaç duyulur. Çünkü sosyal video paylaşım sitelerinin çalışma mantığı mp4 video biçimlerinden farklıdır. Şimdi ilk olarak herhangi bir sosyal video paylaşım sitesinden ilgi çekici bir video bulunuz ve daha sonra videonun altındaki paylaş (share) butonuna basarak karşınıza çıkan linki kopyalayınız. Bu link videonun kaynağı olacaktır. Şimdi üç farklı yöntemle bu videoyu site sayfasına eklenecektir.

2. UYGULAMA

uygulama4

Bu uygulama ile youtube’daki bir videoyu üç farklı yöntemle sayfaya eklenmiştir. Peki HTML5 ile <video> içerisinde controls, loop kodları eklenebiliyordu. Youtube’dan video eklenen üç yöntemde bunu nasıl yapılabilir?

src=”https://www.youtube.com/em bed/K6S40-VtZBI?autoplay=0&loop=1&controls=1″>

Autoplay=0 : Sayfa yüklendiğinde videoyu otomatik başlatma.

Loop=1 : Video bittiğinde tekrar başlat.

Controls=1 : Video kontrol butonlarını görünür yap.

PROJE ŞABLONUNUN OLUŞTURULMASI

Öğrenilenleri tekrarlamak ve yeni kodlar öğrenmek amacıyla örnek bir site şablonu üzerinde çalışılacaktır. Şablonun ana sayfası aşağıdaki gibidir.

rnek bir anasayfa görünümü

İlk olarak şimdiye kadar öğrenilenlerden hareketle, yazılabilecek kodlar, Resim 5’teki gibi bir görüntü elde etmek için yeterli olmayacaktır. Bunun için HTML5 kodları ile sitenin ana çerçeveleri oluşturulmaya çalışılacaktır. Daha sonraki ünitede ise CSS kodları kavrandığında site resimdeki gibi bir görüntüye kavuşturulabilecektir.

Site Başlığı Ve Dil Kodlaması

Site Başlığı Ve Dil Kodlaması

Yeni bir kodla karşılaştık. <head> etiketi arasına yazılan kodlar, sayfanın genel ayarlarının yapıldığı bölümdür. Bu etiket içerisinde,

<title> ile tarayıcı sekmesinde sayfanın başlığını görüntüleyebiliriz.

<meta> ile hangi dil içeriğinin kullanılacağını belirtebiliriz (UTF-8 Türkçe karakterlerin de desteklenmesini sağlar.).

<style> ve <script> ile farklı dosyaları sayfaya bağlayabiliriz. Bu konuya ilerleyen ünitelerde değinilecektir.

Site Banner’ı ve Gezinim Linklerinin Oluşturulması

Site Banner’ı ve Gezinim Linklerinin Oluşturulması

Daha önceden div elementinin anlamsal olmayan yani içeriği her türden element alabilen bir element olduğu bilinmektedir. Burada id = “hgroup” olan bir div elementi oluşturulmuştur. Bu bölüm ilerleyen aşamalarda sitenin logo ve açıklamasının bulunduğu yer olacak.

Yeni Kodlar

Form etiketi: Kullanıcıdan veri girişi almamızı sağlayan, tüm elementleri bir arada toplayan çerçevedir.

Fieldset: Birbiri ile ilişkili elementleri bir arada toplayan bir çerçevedir.

ul ve li: Madde işaretli metinler oluşturmamızı sağlayan elementlerdir. Birlikte kullanılan; <ul> madde işareti konulacak metin gruplarını, <li> ise her bir maddeyi içerir.

uygulama ekran görüntüsü2

Sitenin Slayt Resmi ve Ana İçerik Bölümünün Oluşturulması

a) Sitenin Slayt Resminin Oluşturulması

Sitenin Slayt Resminin Oluşturulması

Sitenin Slayt Resminin Oluşturulması2

uygulama ekran görüntüsü3

b) Sitenin Ana İçerik Bölümünün Oluşturulması

Sitenin Ana İçerik Bölümünün Oluşturulması

Sitenin Ana İçerik Bölümünün Oluşturulması2

Sitenin Ana İçerik Bölümünün Oluşturulması3

Yeni Kod!

Resim Galerisi » şeklinde bir görüntü nasıl elde edilir? Bunun için kodlara dikkat etmek gerekir.

<figcaption><a href=”#”>Resim Galerisi &raquo;</a></figcaption>

Görüldüğü üzere » simgesi &raquo; kodu ile elde edilir. Bu türden kodlar varlık isimleri olarak adlandırılır. Benzer şekilde birçok simgenin varlık ismi vardır. Yandaki QR kodlu bağlantıda 2 simgelerin karşılıklarına gelen kodlar bulunabilir.

Sitenin Alt Bilgi Bölümünün Oluşturulması

Sitenin Alt Bilgi Bölümünün Oluşturulması

Sitenin Alt Bilgi Bölümünün Oluşturulması2

Bu ünite sonunda HTML5 ile site şablonunun ana çerçeveleri oluşturuldu. Böylece ünitedeki kazanımlara yönelik kodlama örneklerini uygulama fırsatı oldu. Şimdi yapılan kodlamaları, index.html şeklinde kendi isminizle oluşturduğunuz dizinin (klasörün) içerisine kaydediniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir