Recent Post

18 Eylül 2016 Pazar


Resim Ekleme

İstediğimiz bir resmi,- ister bilgisayardan ister bir web sayfasından- kendi sayfamıza ekleyebiliriz. Bunun için <img src=”..”> etiketini kullanacağız. Önce örneğimizi görelim ardından ben açıklamayı yapayım.

Resim eklemek için <img src=”...”> etiketini kullandık. Tıpkı <br/> etiketi gibi bu da tek parçadır. Ben eklemek için bir kedi resmi belirledim. Resme sağ tıklayıp özelliklere geldim ve ordan resmin konumunu kopyaladım. Bu, C:\Users\mustafa\Desktop\Yeni klasör idi.  Bunu <img src=”...”> deki noktalı kısma yapıştırdım. Resmin adı kedi.jpg ‘ydi. Yapıştırdığım kısmın yanına bir slash “\” işareti koyup kedi.jpg yazdım. <img src="C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg" > haline geldi ve artık kullanıma hazır.
 Resmin konumunu ve adını uzantısıyla beraber (.jpg .png .gif vs) yazmak resmin sayfamızda görünmesi için yeterli. Bunun yanı sıra resmin boyutunu ayarlamak da bizim elimizde. Uzunluk ve genişliğini ayarlamak için   width=”..” ve heigth=”..” ifadelerini kullanacağız. Hemen örneğimizi yapalım.

Gördüğünüz gibi, zor bir yanı yok.
Eğer resmin ve not defterinde oluşturduğumuz html sayfasının konumu aynıysa sadece resmin adını yazmamız yeterli olur. Mesela masaüstünde yeni klasör oluşturalım ve resmi oraya kopyalayalım. Sonra aynı klasör içerisinde bir de not defteri oluşturup kodlarımızı yazalım.

Yine aynı şekilde resmimiz web sayfasında görüntülenecektir. Bu şekilde çalışmak bizi gereksiz kodlardan kurtarır, daha sade bir yapıya kavuşturur.
Herhangi bir internet sitesinde gördüğünüz resme sağ tıklayıp URL adresisini kopyalarsanız; resmi kendi web sayfanızda görüntüleyebilirsiniz.

Arka planı değiştirme

Arka planı değiştirmeyle ilgili de iki örnek yapalım. Ama unutmayın ki sayfaya görsel açıdan zenginlik katacak olan CSS'tir. HTML bu konuda yetersiz kalıyor. Yine de bilmekte fayda var.

Bu ilk örneğimiz. Arka plan rengini değiştirmek için normal <body> etiketinin yanına bgcolor=”..” ifadesini ekledik ve noktalı yere black yazdık. Açtığınızda karşınızda siyah, boş bir web sayfası olacak. Black yerine diğer renk adlarını veya renk değerini yazabilirdik. #000000 ifadesi de siyahı belirtir. Kırmızın değeri # FF0000 , mavinin değeri #0000FF ‘dir. Bunların ezberlenmesine gerek yoktur. Küçük bir Google araştırmasıyla bütün renklerin ve tonlarının değerini bulabilirsiniz.
Şimdi ise arka plana bir resim yerleştirelim.

Kedi resmimiz arka plana yerleşmiş oldu. Resim arka planı tamamen kaplamaz. Orijinal       boyutuna göre tekrar eder. Bununla ilgili detaylı bilgileri CSS’ te öğreneceğiz.

0



HTML Yazı Tipleri

Geçen ders HTML’ e giriş yaptık, temel kodlarımızı öğrendik. Şimdi bunu bir adım ileriye taşıyacağız. Ancak öncelikle şunu belirtmek istiyorum. Geçen dersimizde HTML5 in son sürüm olduğunu söylemiştik. HTML5 ile beraber bazı yeni özellikler gelirken bazı kodlar da desteklenmemeye başlandı. Bunları HTML5 başlığı altında ayrıca öğreneceğiz. Şimdilik yakın zamana kadar kullanılan HTML kodları üzerinden derslerimize devam edelim.
Ekrana yazı yazdırmayı öğrenmiştik. En basit şekilde:

Ekrana "Merhaba Dünya" yazdırabiliriz. Şimdi bunu farklı şekillerde yazalım. Not defterimizi            açıp aşağıdakileri yazıyoruz.

Önce etiketleri açıklayalım:
<b>...</b>:Geçen ders verdiğimiz ilk örneğimizdi.
 Yazıların kalın görünmesini sağlar.
 (Örn. Merhaba Dünya)
<i>...</i>:İtalik görüntü sağlar. (Örn. Merhaba Dünya)
<u>...</u>:Yazıyı altı çizili gösterir. (Örn. Merhaba Dünya)
<del>..</del>:Yazıyı üstü çizili gösterir. (Örn. Merhaba Dünya)
<sub>...</sub>:Yazıyı satırın yarım karakter altında gösterir.
 Matematiksel vb. formülleri gösterirken
 kullanabilirsiniz. (Örn. Merhaba Dünya)
<sup>...<sup>:Yazıyı satırın yarım karakter üstünde gösterir.
Mesela bir sayının üslü halini web
sayfasında gösterirken kullanabilirsiniz.
(Örn. MerhabaDünya)
<marquee>...</marquee>:Kayan yazı oluşturur.

Şimdi not defterini html uzantılı olarak kaydedin ve sonucu görün.
Sıra <font> etiketini tanımaya geldi. <font> etiketini kullanarak yazının tipini, rengini ve boyutunu değiştireceğiz.
Örneklerle gösterelim.


Açıklayacak olursak: Font etiketiyle yazıya 3 farklı özellik kazandırabiliyoruz. Renk, yazı tipi, yazı boyutu. Önce font yazıyoruz sonra da face, color veya size. face="..." arasına yazı tipi yazıyoruz. Arial, tahoma, verdana gibi. color="..." arasına renk değeri yazıyoruz. Red, yellow, blue, aqua gibi... size="..." kullanımında ise istediğimiz yazı boyutunu giriyoruz.

0

17 Eylül 2016 Cumartesi





HTML'e Giriş
Bu yazımda size HTML'i tanıtacağım ve birkaç basit örnek yapacağız. HTML derslerimiz bittiğinde ise bir web sayfası oluşturabilecek seviyeye geleceğiz.
HTML, tam adıyla söylersek Hyper Text Markup Language, web sayfalarını oluştururken kullandığımız temel dildir. Türkçe karşılığı tam yoktur ancak çeşitli yerlerde birbirine yakın çeviriler bulunmaktadır. Biz de Metin İşaretleme Dili diyebiliriz. Şunu da belirtelim HTML bir programlama dili değildir.
HTML kodlarını yazmak için özel bir programa ihtiyaç yoktur. Çalışmalarımızda kodlarımızı not defterine yazacak sonra da herhangi bir tarayıcı ile (Google Chrome, Firefox, Opera...) anlamlı hâle getireceğiz.
HTML 1990 yılında geliştirilmiştir ve daha sonra çeşitli sürümleri çıkmıştır. Sonuncusu ise 2012 yılında çıkan HTML5'dir.
Artık yavaş yavaş HTML kodlarını tanımaya başlayalım.
HTML dili etiket adını verdiğimiz kodlardan oluşur. Etiketler “<” ve “> “ arasına yazılır. Örneğin <html> ,<body> ,<head>… Genellikle her etiketin bir de kapanışı vardır. Bunun için de etikete fazladan “/” ekleriz. Yani örnek verdiğimiz üç etiketi kapatırken </html>, </body>, </head> şeklinde yazıyoruz. Kodumuzu yazıyoruz sonra istediğimiz herhangi bir içerik ekliyoruz (yazı, resim, vs...) sonra da kapatıyoruz. Daha detaylı bir örnek verelim: <b> etiketi yazının kalın görünmesini sağlar. <b>...</b> arasına yazıcağımız bütün yazı kalın görünür. (Örn.: <b>Bu yazı kalındır </b>)
Şimdi genel sayfa yapısını inceleyelim.

Dikkat ettiyseniz açılan her kod kapatıldı. Bunun unutulması kodların çalışmasını olumsuz etkiler. Not defterini açın ve yukarıdaki kodları yazın. Sonra kaydedin ve kapatın. Yeni Metin Belgesi.txt olarak kaydedilecektir. Uzantısını değiştirin, txt yi silin ve html yapın. Artık açtığınızda not defteri ile değil de internet tarayıcınız ile açılacaktır ve ekranda şu görülür:
  "Merhaba Dünya"
Sekme başlığında ise “Başlığım” yazısını görürsünüz. Böylece ilk kodlarımızı yazmış ve çalıştırmış olduk. Şimdi ise kodların ne işe yaradıklarını açıklayalım:
Bütün HTML kodları <html>…</html> arasına yazılır. Onun dışına yazdıklarınızın bir etkisi yoktur. <html> kodlarının arasında da iki temel kod kullandık. <head> ve <body> sayfanın baş ve gövde kısımları. <head>…</head> arasındaki kodlar sayfa bilgisini tanımlamaya yöneliktir. Biz <title> etiketini kullanarak sayfaya bir başlık verdik. Bunun dışında <meta> etiketini; javascript, css gibi diğer web dillerini kullanabiliriz. Javascript ve css HTML e göre ileri düzeydir. HTML’i öğrenmeden onlara çalışmanız doğru olmaz . Yine de ne işe yaradıkları hakkında araştırma yapabilirsiniz. Neyse konumuza geri dönelim.
<meta> etiketine ileride detaylı değineceğiz. Şimdilik asıl ilgilendiğimiz <body> etiketi olacak. Bir web sayfasının içeriği <body>..</body> etiketleri arasındadır. Tüm yazıları, resimleri, tabloları oraya ekleriz. Kullanıcının sayfada gördükleri <body> kısmındakilerdir. 
Bu sefer HTML ile alt alta 3 cümle yazdıralım. <head> etiketini kullanmayabiliriz. Bu kodların çalışmasını olumsuz etkilemez.



<br/> etiketi özel bir etikettir. Normalde yazılarımızı 2 etiket arasına yazıp öyle değer kazandırırız. Ancak <br/> etiketi tek kullanılır. Satır sonunu belirtir. Tarayıcı <br/> den sonraki herşeyi bir alt satıra atar. Mesela HTML ile bir şiir yazacaksak her mısra sonuna <br/> etiketi koymamız gerekir. Peki ya yazacağımız yazı paragraflar halinde uzun bir yazıysa? İşte o zaman paragraf özelliği kazandıran <p> etiketini kullanmamız gerekir.  <p>..</p> arasına yazımızı yazarız. Bir örnekle gösterelim.




Barış Manço hakkındaki yazımız 2 paragraf halinde tarayıcımızda görüntülenir. Hadi bir de başlık ekleyelim. Ama önce ben başlık etiketleri hakkında biraz bilgi vereyim sizlere... 6 farklı büyüklükte başlık yazmamızı sağlayan etiketler vardır. Bunlar <h1>’den <h6> ya kadardır ve <h6>’ya gidildikçe yazı boyutu küçülür. Bir örnekle bunu görelim.



Not defterine yazıyoruz. Kaydedip uzantısını .html yapıyoruz ve tarayıcımızla açıyoruz. BAŞLIK kelimeleri büyükten küçüğe doğru sıralı olarak karşımızda!
Başlığımızın ortada olmasını isteyebiliriz. Bunun için de <center> etiketini kullanmamız gerekir. <center>…</center> etiketleri, arasındaki herşeyi ortalar. Hemen küçük bir örnekle gösterelim onu da...

Eğer <h1><center>BAŞLIK</center></h1> şeklinde yazsaydık yine aynı sonucu verirdi. Ancak <h1><center>BAŞLIK</h1></center> şeklindeki yazım yanlıştır! Yani bir ifadede iki farklı kod kullanacaksak, önce hangisini açtıysak en son onu kapatmamız gerekir.

0


 WEB TASARIM ÖĞRENMEYE NEREDEN BAŞLAMALIYIM?



Öncelikle web tasarım öğrenmeye, ben neden web tasarım öğrenmek istiyorum sorusuyla başlanılmalı. Bu soruyu sorarak görsel web tasarım mı yoksa tekniksel web tasarım mı konusunda bir seçim aşamasından geçmiş olacaksınız. Görsel dediğimiz tasarım Photoshop, Illustrator gibi programlar yardımıyla kod kullanmadan web arayüzü geliştirmeye verilen isimdir. Yani eğer siz ben sadece web tasarımda görsel hayal gücümü kullanarak yeteneklerimi sergilemek istiyorum diyorsanız bu sizin için iyi bir seçim olacaktır. Photoshop ile web tasarım gerçekten harikalar yaratan olaylardan birisidir. Böylece hiç kod bilgisine takılmadan yaratıcı arayüzler oluşturmanıza olanaklar sağlar.
Başka bir türe gelecek olursak bizim tekniksel web tasarımı dediğimiz olay hali hazırda Photoshoplar ile hazırlanmış arayüzleri teknik olarak kodlama ile hayata geçirmektir. Hatta bunu PHP ile birleştirerek dinamik websiteleri oluşturabilmektir. Web tasarım öğrenmeye başlamanın bu aşaması sizinde tahmin ettiğiniz üzere kodlama ile devam etmektedir.

WEB TASARIM MODASI

Web tasarım öğrenmeye nereden başlasam diye kendinizi yormaya hiç gerek yok. Öncelikle hayal gücünüz bu aşamada en önemli yardımcınız ve kriterinizdir. İşe elbetteki diğer websitelerinin tasarımlarımlarını inceleyerek başlamalısınız. Böylelikle aklınızda bir web tasarım modası fikri oluşacaktır. Bu alan gayet tabiki tasarımla ilgili olduğu için elbette ki bunun bir modası olması hiç şaşırtıcı değildir. Eğer sizde iyi bir modacıysanız trend yaratan web tasarımlarına imza atarak ünlü bile olabilirsiniz.
Diğer websitelerinin web tasarımlarını inceledikten sonra ufkumuz sanıyorum ki biraz gelişti. İkinci aşamada ise yapmanız gereken Photoshop öğrenmek. Bir çok set mevcut bu alanda halen araştırmalarımız devam ediyor en kısa zamanda web tasarım öğreten photoshop ile ilgili eğitim seti tavsiyelerimizi sizlere sunacağız. Photoshop u derinlemesine öğrenmenize gerek yok sadece neyin ne olduğunu bilin yeterli. Asıl önemli olan web tasarım yaparken hayal gücünüz. Eğer bu alanda hayal gücünüz iyiyse eşsiz bir tasarıma imza atmanız o kadar da uzak sayılmaz.
Photoshop öğrenerek bir websitenin web tasarımını yani arayüzünü hazırlayacak kıvama geldik. Şimdi sırada bunu kodlara dökebilmek için ne yapmamız gerektiği var.

HTML5 VE CSS3 WEB TASARIM ETKİSİ

Şimdi bir arayüz tasarladık bunu nasıl yaşayan bir projeye çevireceğiz? Web tasarım arayüzünü HTML5 ve CSS3 ile hayata geçireceğiz.

HTML5 bir sitenin iskeletini CSS3 ise onun et kısmını oluşturuyor. Yani siz ilk önce Photoshop ile çiziyorsunuz sonra o web tasarımın teknik iskeletini HTML5 ile oluşturuyorsunuz ve en sonra rengarenk hareketli bir tasarıma dönüştürmek için CSS3 kullanıyorsunuz. Böylece bir websitesi hayat buluyor.

YA SONRASI? PHP WEB TASARIM

Her şeyi yaptık bir arabanın yani web sitesinin içinden dışına web tasarımla alakalı her şeyini yaptık. Peki bu PHP nin web tasarımla ilgisi nedir? Her şey bittikten sonra dinamik websiteleri dediğimiz yani websitenize girecek olan kullanıcıların sizinle etkileşime girebilmesi için gerekli olan bir şey daha var. Yani en küçük örnek olarak bir iletişim formunun bile çalışabilmesi için o mailin size ulaşabilmesi için devreye programlama kısmı geliyor. Bu kısım için PHP den yardım alıyoruz.

SONUÇ

Sonuç olarak ilk olarak;
  • Photoshop ile web tasarımını çiziyor resmediyoruz.
  • HTML5 ile websitemizin genel iskeletini kodluyoruz.
  • CSS3 ile kodladığımız web tasarımını giydirerek resmettiğimiz şekle sokuyoruz.
  • PHP ile hazırladığımız statik websitemizi canavar gibi çalışan DİNAMİK bir websitesine dönüştürüyoruz.

Ve, websitemiz hazır. Hayırlı uğurlu olsun. Burada sizlere web tasarım öğrenmek istiyorum ama hangi sıra ile başlamalıyım diye kendini sorgulayan arkadaşlarımıza yardımcı olması dileğiyle bu yazımızı yazdık. Yazımız çok detaylı olmasada gerçekten yol gösterici bir harita niteliğinde oldu.
0

15 Eylül 2016 Perşembe

                   Web Sitesinde Olmaması Gerekenler


Web sitenin daha yararlı olması yani kullanıcılarına fayda sağlaması için aşağıdaki maddeleri gözden geçirsen iyi olur…

Flashlar


Flash devri artık bitti. Google arama sonuçlarında Flash site ya da çoğunluğu bu uygulamayı kullanan siteleri artık indekslemiyor ya da geri planda bırakıyor. Ek olarak mobil cihazların neredeyse tamamı da flash desteklemiyor. Tüm bunlardan ötürü flash uygulamalardan kaçınmalı; daha sade, hızlı uygulamalara yer vermelisin. Unutma ki günümüzde mobil cihazlardan internet erişimi dizüstü ve masaüstü bilgisayarlardan daha fazla.
Animasyonlar
Sitende gereksiz hiç bir animasyon kullanma. Örneğin site arka planında göz yoran ve sitenin hızını düşüren efektler, sitende kar yağması gibi gereksiz animasyonlar sana güzel gibi görünse de ziyaretçilerinin hoşuna gitmediği gibi siteni de yavaşlatıyor.
Küçük Görseller
Sitende kullanacağın tüm görselleri net bir şekilde sunmaya özen göster. Küçücük resmi 5 katı kadar büyüterek göstermeye çalışma. Hem amatör bir görüntü oluşturur hem de göstermeye çalıştığın resmin bir anlamı kalmaz; hatta bunu yapacağına hiç resim kullanma daha iyi!
Rengarenk Yazılar
Paragrafların için de tek renk (siyah, koyu gri, lacivert) kullanın. Bir cümleyi yeşil, bir cümleyi kırmızı kullanma. Bunun ilgi çektiğini sanıyorsun ama aksine ziyaretçilerinin gözünü yoruyor. Ayrıca çok önemli ya da vurgu yapman gerekmediği zamanlarda BÜYÜK HARF ile cümlelerini kurma. Bu ziyaretçilerinin okumasını zorlaştırır. Son olarak gereksiz yerlerde “strong, bold” kullanma. Sadece önemli olan cümle ya da kelimelerde bunu kullan.
Site Dışından Kaynaklar Kullanmak
Hava durumu, döviz, saat, haber eklentileri gibi iframe ile alınan uygulamaları sitende kullanma. Düşün ki hiç kimse hava durumunu senin sitenden izlemez ya da piyasaları bir çok kaynak site varken seninkinden takip etmez. Bu uygulamalar sadece ve sadece sitende gereksiz yer kaplar ve görüntü kirliliğine yol açar.
SEO için Gereksiz Cümleler Kullanmak
Sırf Google’da daha üst sıralara çıksın diye bir makale ya da bilginin ilk paragrafını gereksiz kelime öbekleri ile doldurma. Bu ziyaretçilerinin hiç hoşuna gitmez. Ayrıca sandığının aksine bu Google için olumlu değil, olumsuz bir uygulamadır. İçeriklerini oluştururken her zaman ziyaretçilerinin fayda sağlamasına odaklan; arama motorlarına değil.

0

Author

Social Share Icons

Labels