antirikot
New member
Dersler / Html / Html Nedir ?
Hackhell'in Üyelerine Özel Html Dersleri
Html'e Giriş
Html'e Giriş
Hypertext Markup Language (HTML ) belgelerin birbirlerine nasıl bağlanacaklarını ve belge içindeki metin ve resimlerin nasıl yerleşeceklerini belirleyen ve etiket (tag ) denilen kod parçalarından oluşan bir sistemdir. Belgeleri birbirlerine bağlamak için kullanılan Hypertext'ler oldukça güçlüdürler. Internet üzerinde yaşayan World Wide Web (Kısaca WWW ya da Web ), HTML sisteminin arkasında etkileşimli, çok platformlu, multimedia ve client/server uygulamaları yaratmak için kullanılır.
Web, formatlı metinler, ses ve resimlerden oluşan "yaşayan" belgelerden oluşur. Bu belgeler Webspace denen alanları oluşturur. Bir webspace tipik olarak,home page etrafında biriken linkli sayfalardan oluşur. Bu linkler webspace içinden bir iç adres ya da dış kaynaklı bir adres olabilir. Bir home page ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır.
Aslında HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser )tarafından verileri nasıl işleyeneceğini belirler.
Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz,okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.
Teknik olarak HTML, Standard Generalized Markup Language (SGML ) Document Type Definition (DTD ) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960'ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language ) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO ) tarafından standart haline getirildi. (Referans numarası: ISO8879:1986 )
Bir SGML belgesi üç ana parçaadan oluşur. İlk parça, tag ile normal metni birbirlerinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret etiketlerini içerir. Bu üç parçanın hepsiaynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür.
Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <P> gibi, bazıları ise açma-kapama olarak kullanılırlar,>B>Dikkat! >/B>gibi.
Dikkat etmeniz gereken nokta: Bütün başlama kodları "<" ve ">" işaretleri arasında, bitirme kodları da "</" ve ">" işaretleri arasında olmalıdır. Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur
Örnek:
HTML kodlarını görebilmek için Internet Explorer'da View menüsünden Source (Görünüm/Kaynak ) menüsünü tıklayın. Acılan Txt dosyasında (Not Defteri ) HTLM kodlarını görebilirsiniz. Dosya/Farklı Kaydet.. menüsünden .htm veya .html uzantılı olarak HTML dosyası yaratabilirsiniz.
Dersler / Html / Katmerler(Layers ) 2.
Bir Önceki derste eklediklerimize göre yapacağımız işlemleri burda sırası ile uygulayacağız. E-bilisim.net üyelerine uyarı. Düz okuyarak geçmeyin muhakkak okuduğunuz alanla ilgili pratik yapın.
Swatches Penceresinden Renklerimizi Seçebiliriz.
"Layer Order" Yaparken Layer Penceremizdeki İşlemler:
Palet de (Renk Seçim Aracı ), Üst renkleri (Foreground )seçiyoruz.
İmajımızı PSD Formatında kaydettikten sonra, Layer özelliklerini biraz daha inceleyelim.
Layer Penceresinden tuşuna basarak yada Layer > New > Layer ile yeni bir Layer açalım. (Shft+Ctrl+N ).
Layer Properties'de Name kısmına, "Dikdörtgen" yazalım. Layer ımız seçili iken (Mavi Renk ) ( Göz ve Fırça açık - görünür olacak ), tekrar Tool Box dan Marquee Tool aracına gidip Rectangular Marquee Tool'u seçerek - bu defa Shift tuşuna basılı tutmadan - istediğimiz büyüklükte bir Dikdörtgen çizelim. Eğer çizim sırasında Shift tuşunu basılı tutarsak çizimimizin Kare olacağını bir kez daha hatırlatalım. Dikdörtgenimizi boyamak için tekrar Swatches penceresinden bir renk seçelim. Bu defa Yeşil'i seçtik (RGB Green ). Bu defa Renk Değişim Aracında üstteki renk "Foreground" Yeşil oldu. Tekrar Tool Box'dan Paint Bucket Tool'u seçip, imajımızda seçili olan dikdörtgenin içine tıklıyoruz. Layer Penceremizde Üçüncü Layer'imiz olan "Dikdörtgen" isimli Layer ımız da da Yeşil renkte bir Dikdörtgenimiz oldu.
Önceden gördüğümüz gibi imajın içinde Layerleri -Layerlerin içindeki resimleri- sürükleyerek taşımak için Tool Box 'tan Move Tool aracını , seçip sürükleyerek taşıyorduk. Move Tool Aracının özelliklerinden bahsedersek, bu aracı seçtiğimizde, Tool Options Bar'a dikkat edersek, "Auto Select Layer" kutucuğunu görürsünüz. Şayet bu kutucuk işaretli değilse, Move Tool Aracını imajımızın içindeki herhangi bir resmin üzerinde sağ tuş ile tıklarsak o resmin hani Layer de olduğu en üstte olmak üzere altındaki bütün Layerlerin listesini gösterir. Buradan Layer Penceresindeki istediğiz Layer'i seçebiliriz. Ancak bu kutucuk işaretli ise Move Tool Aracını hangi resim üzerine tıklarsak, Layer Penceresinde o resmin Layer'ini otomatik olarak seçer.
Üçüncü "Dikdörtgen" Layer'ımızı yaptık
Move Tool ile Tool Options Bar'da "Auto Select Layer"'i Seçmek.
"Move Tool" da iken "Auto Select Layer" seçimini animasyonlu GÖRÜN Aşağıdaki resimde
Layer Penceresinde Layerlede bulunan göz şekline ise tıklarsanız, "Göz" ikonu kaybolur ve o layere ait resim imajımız da görünmez. Resmi tekrar görmek için "Gözün" kaybolduğu ikonuna tekrar tıklayıp "Göz" ikonunu aktif hale getirmemiz gereklidir. Yani istemediğimiz layerleri imajdan silip, sonradan pişman olmaktansa, "Göz" ikonu ile kapatıp, tekrar açabiliriz
Move Tool" Aracının Kullanımını animasyonlu görÜN
Layer Penceremizin Boyutlarını sağ alt köşesinde bulunan noktasından tutup çekerek -yandaki şekildeki gibi- büyültüp, küçültebiliriz.
İmajımızı, tekrar PSD Formatında kaydedelim ( File > Save )
Bitmedi Bi dahaki derse kadar bi çay arası verin.
Fazla sıkılmayın diye dersleri böldüm.
Umarım işinize yarar..
Ayrıca bu konularda sorun yaşarsanız
http://www.e-bilisim.net/Subforum.asp?f=39
Bu Linke tıklayarak soru sorabilir ve en kısa sürede cevap alabilirsiniz.
Dersler / Html / Temel Unsurlar
Bu sayfaya geldiğinize göre HTML öğrenme işinde
ciddisiniz demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya
hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak
için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü
bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. Piyasada
iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat
bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog, HomeSite.. )
diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın ) tarzı
denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage,
Dreamweaver, NetObjects Fusion,.. ). Benim yeni başlayanlara tavsiyem Windows'un
Notepad'i. Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel
editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve
kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen
kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek.
Burada şunu da belirtmek gerekiyor; browserlar
arasındaki yorum farklarından dolayı sayfanız bir browser'da iyi görünürken bir
başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı
teknikleri (css, dhtml gibi ) sadece MS Internet Explorer 4 ve üstü desteklerken
Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı
neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu
yönleri var. Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz
başarı sayfanızı ziyaret eden kişinin kullandığı browser'a mahkum. Hatta
ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan",
"grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti
demektir. Yine de bu kadar karamsar olmayalım.
Bu kadar genel bilgi yeter. Bir sonraki konuda
ilk HTML sayfamızı yapıyoruz.
Dersler / Html / İlk Html Sayfam
ilk HTML sayfamızı yapıyoruz.
Öncelikle çalışmalarınızı saklamak için
kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela
html_ders olsun. Daha sonra bu ad bize lazım olacağından kolaylık olması
için siz de yeni klasöre bu adı verebilirsiniz.
Şimdi de bu klasörü açıp yeni bir metin
belgesi oluşturun (sağ fare/Yeni/Metin belgesi ).
Dosyayı çift tıklayarak açın ve şunları
yazın:
Şimdi dosyayı kaydedin (Dosya/Farklı
Kaydet... ). Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar
dahil ) ve Tamam'a basın.
Notepad'i kapatın, metin dosyasını silin ve
oluşan yeni dosyayı açın. Dosya varsayılan browser'ınız (Internet Explorer,
Netscape Navigator gibi ) tarafından açılacaktır. Şöyle bir görüntü elde
edeceksiniz:
Tebrikler ilk HTML sayfanızı yaptınız.
Şimdi de bu belgeyi nasıl oluşturduğumuzu
birlikte inceleyelim. Birşey dikkatinizi çekti mi? Yngilizce bir takım kelimeler
var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık.
Bu ifadelere tag (etiket ) deniyor. Etiketler etki etmesi istenilen metnin
önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha
sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız
etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde
sonlandırılmak zorunda.
Burada kullandığımız etiketler ve anlamları
şöyle:
<html>...</html>
Tarayıcıya HTML dosyasının başladığını ve
bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.
<head>...</head>
<body>...</body>
Bir HTML belgesi iki bölüme ayrılır: head
(baş ) ve body (gövde ). <head>...</head> etiketleri arasına sayfa hakkında
bilgiler yazılır, meta ve title gibi etiketler burada yeralır. Meta
etiketlerine ileride değineceğiz.
<body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek
kısımlar bu tagler arasında yeralıyor.
<title>...</title>
Title sayfanın başlığını belirtiyor. Burada
yazılanlar browser penceresinin başlığında browser adıyla beraber
gösteriliyor.
Dikkat ederseniz hazırladığımız sayfada sadece
temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket
kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama
Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor.
Yşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp
kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.
Dersler / Html / Metin Biçimleme
Bu bölümde öğreneceğimiz etiketler:
Başlık etiketleri: <h1>...<h6>
Paragraf etiketi: <p>...</p>
Ortalama: <center>...</center>
Diğer etiketler:
<b>...</b>,<i>...</i>,<u>...</u>
HTML'de metin stillerini üç şekilde
belirleyebiliriz:
Düzenlemek istediğimiz metnin hemen önüne
koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi )
biçimlendirme denir.
Sayfanın head (baş ) kısmına koyulan stillere
body (gövde ) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü
biçimlendirme )
HTML dosyasının dışında başka bir stil
dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style
Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize
örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi
geniş imkanlar veriyor.
Birinci metotta her metin için ayrı ayrı stil
belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu
stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus
da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu
Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber )
destekliyorlar.
Burada konumuz birinci metoda göre
biçimlendirmeyi öğrenmek.
Başlık etiketlerinden başlıyoruz. Notepad'i
açıyor ve şu kodları yazıyoruz;
Sayfanın işleyişine baktığımızda, önce her zaman
yapmamız gerektiği gibi <html>, <head>, <title>
etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve
sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu
metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin
arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6>
etiketleri arasındaki kelimelere belirli büyüklükler verdi.
Şimdi de kendiniz <h1>...<h6>
etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl
olduğunu kavrayın. Hatta iyi bir deneme-yanılma olması açısından örneğin her
seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek
ne gibi etkiler oluşturduğunu gözlemleyin. Denemelerinizin bir kısmında hiçbir
değişiklik olmadığını gözlemleyeceksiniz bunun sebebi, browser'ınızın otomatik
olarak hatayı algılayıp düzeltmesidir.
Diğer etiketleri toplu olarak kullanarak yeni
bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:
Etiketleri kullanma mantığımızı anlamış
olmalısınız. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz
ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiket biz
sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala
tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek
kaydedin ve diğer taraftan browser'ınızın refresh/reload (yenile ) tuşuna
basarak değişiklikleri gözlemleyin.
Yeni öğrendiğimiz kodlara bir göz atalım:
<center>....</center>
Aradaki metinleri sayfaya göre ortalar. (center )
<b>....</b>
Aradaki metni koyu (bold ) yazar.
<i>....</i>
Aradaki metni eğik (italic ) yazar.
<u>....</u>
Aradaki metni altı çizili (underline )
olarak yazar.
<h1>....<h6>
Başlık (heading ) etiketi. h1 en büyük, h6
en küçük.
<p>....</p>
Aradaki metin paragraf özelliği kazanır.
Sonlandırıldığında, takib eden metin bir satır boşluk bırakılarak ve satır
başına yazılır.
Başladığınız etiketi
sonlandırmayı sakın unutmayın !
Burada bilmeyenler için küçük bir bilgi; bir
html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp
kaynağı görüntüle/view source'u seçtiğimizde Internet Explorer için Notepad,
Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu
gösterecektir.
Dersler / Html / Fontlar ve Kullanımı
<font face="..." size="..." color="...">...</font>
face =
yazıtipinin adı (arial, tahoma, verdana, ... )
size = yazının büyüklüğü (1-7 arası )
color = yazının rengi (red, green gibi renklerin ingilizce karşılığı
yada RGB renk değeri )
Bunlara font etiketinin parametreleri diyoruz.
<font> etiketinin yanısıra öğreneceğimiz bir
diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi
bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de
metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter
tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve
metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu
yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini
kullanıyoruz. Ystisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor.
Buna bir örnek verelim;
Yukarıdaki örneğimizde "pazartesi, salı ve
çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize rağmen browser bunu
gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını
tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak
bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere metni bir alt
satıra geçirmek için <br> etiketini kullanıyoruz. Bu etiketin bir özelliği de
sonlandırılmaması.
Şimdi font etiketinin kullanımını bir örnekle
inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font
etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile
gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin
(Başlat/Ayarlar/Denetim Masası/Yazıtipleri ). Buradan yazıtiplerini açarak
inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte
kullandığım yazıtipleri (tahoma, comic sans ms, verdana, arial )
sisteminizde yüklü değilse bunun yerine sizde yüklü olan istediğiniz bir fontu
kullanabilirsiniz.
Her zamankinden farklı olarak ve ilk defa
sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla
yaptık. Aslında bunun bir yolu daha var; o da renk kodu yerine rengin ingilizce
adını yazmak (color="red" gibi ).
Bu konuyu renkler bölümünde ayrıntılı
olarak inceleyeceğiz. Burada yalnız bir kaç örnekle yetinelim:
Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green
Bu renkleri yukarıdaki örnek üzerinde deneyin,
renk kodunu silin ve rengin ingilizce karşılığını yazın.
ÖDEV: Şu ana
kadar öğrendiğimiz etiketleri kullanarak (tabii ki hepsini kullanmak zorunda
değilsiniz ) aşağıdaki görüntüyü browser'da nasıl elde ederiz?
IPUCU
Öğrendiğimiz etiketler şunlardı;
<html>, <head>, <title>,
<body>, <p>, <center>, <b>, <u>, <i>, <font>
Dersler / Html / Html de Listeler
HTML bize üç tip liste hazırlama imkanı veriyor.
Bunlar;
Sıralı listeler (ordered list )
Sırasız listeler (unordered list )
Tanımlama listeleri (definition list )
Sıralı listeler rakam veya harf yada her ikisini
içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde
imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden
çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir
araçtır.
Sıralı Listeler
Liste içine alınacak metinler <ol>...</ol>
etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve
bittiğini belirtir. Liste maddelerinin başına ise <li> (list item )
etiketini getiriyoruz. Bu etikette tıpkı <br> etiketi gibi
sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla
listemizin rakamla mı harfle mi başlayacağını (type ) yada hangi
rakam/harfle başlayacağını (start ) belirtebiliyoruz. Compact
parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını
sağlıyor.
Bundan sonraki örneklerimizde sayfa kodunun
yalnız body (gövde ) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi
sayfanızda tam olarak yazmayı unutmayın.
Kimya
Organik
Inorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
Yntegral
Listeleri buradaki örnekte olduğu gibi iç içe
hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi ile
başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek
ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste
içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra
tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen
uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar
olabilir; sayılar, harfler (küçük/büyük ) ve romen rakamları (i,ii,iii gibi )
Sırasız Listeler
Bu tip listelerde de mantık aynı. Fark;
listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük
yuvarlaklar, kareler kullanabilmemiz. <ol> etiketi yerine <ul>
etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi
burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle;
type için disc (içi dolu daire ), circle (içi boş daire ),
square (içi dolu kare ). Compact parametresi sırasız listelerde de
kullanılabiliyor.
Kimya
Organik
Ynorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
Integral
Tanımlama Listeleri
Bu listelemede kullanılan etiketler şöyle; <dl>...</dl>
, <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız
<li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor.
Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Yine parametre
olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
Hemen örneğimize geçelim,
<font face="verdana" size="4" color="red">Neler öğrendik?</font>
<dl compact>
<dt><font size="3" color="blue">HTML nedir?</font>
<dd><font size="2" color="black">HTML (HyperText Markup
Language-Hareketli-Metin Yşaretleme Dili ) basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayan
bir çeşit dildir...</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2" color="black">Bu dilde binary veya
hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı
oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editör
bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren...</font>
<dt><font size="3" color="blue">Listeler</font>
<dd><font size="2" color="black">Sıralı listeler rakam
veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız
listeler rakam/harf yerine madde imleri koyarak liste
oluşturmamızı sağlar...</font>
Dersler / Html / Html'de Renkler
Metin renklendirmeyi yüzeysel olarak fontlar
konusunda öğrendik. Şimdi daha ayıntılı olarak ve bu işin mantığına inerek
yeniden ele alacağız. Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.
Renk kodları
Fontlar konusunda, metnin rengini belirlerken
<font color="..."> etiketini kullanmıştık ve color komutunun
karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha
karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek.
Önce sayı düzenleri nedir nasıl olur ona bakalım.
Günlük hayatımızda kullandığımız sayı sistemine
10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan
sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı
sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili
(binary ) ve onaltılı (hexadecimal ) sayı sistemleridir.
ikili sayı sistemi nasıl olur? Bildiğiniz gibi
günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam
vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1 )
ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? Yşte burada
işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk
düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye
bölünür ve kalanlar soldan sağa doğru yanyana yazılır.
Gelelim asıl konumuz olan 16'lık sayı
sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar;
[10'un karşılığı A ... 15'in karşılığı F'dir.]
Etikette kullandığımız color=#xxxxxx
ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi ) renklerinin karışım
oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında
olabilir (FF maksimum, 00 minimum karışımı verir ).
Buna göre; #000000 siyah,
#FF0000 kırmızı, #00FF00 yeşil,
#0000FF mavi, #FFFFFF beyaz'dır.
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
#000000=black(siyah )
#000080=navy(lacivert )
#0000FF=blue(mavi )
#008000=green(yeşil )
#008080=teal(koyu yeşil )
#00FF00=lime(parlak yeşil )
#00FFFF=aqua(turkuaz )
#800000=maroon(vişne çürüğü )
#800080=purple(mor )
#808000=olive(zeytuni yeşil )
#808080=gray(gri )
#C0C0C0=silver(gümüşi gri )
#FF0000=red(kırmızı )
#FF00FF=fuchsia(parlak pembe )
#FFFF00=yellow(sarı )
#FFFFFF=white(beyaz )
Artalanı Renklendirmek
Bu renklerle yalnızca metinleri değil
sayfamızın artalananını da renklendirebiliriz.
Bunun için <body bgcolor=#xxxxxx>
etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için
yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde
değiştiriyoruz.
Renk kodlarını yazarken daima #
işaretini kullanmayı unutmayın !
Dersler / Html / Ziyaretcinin IP sini Bulma
Sitenizi Ziyaret Eden Kişilerin IP'sini Bulmanıyı Öğrenelim :
Koduyla Buluruz Ve İstedigimiz Yerde :
Olarak Yazırabiliriz...
Dersler / Html / Nesne Ortalama Bloğu
İlk tanıtacağım bloklama aracı <center>...</center> kodlarıdır. Bu kodlar arasına yazılan HTML nesneleri sayfanın ortasına yaslanır (merkezlenir ). Özellikle sayfa tasarımında, tabloların her boyuttaki pencereye uyum sağlaması için kullanılır. Küçük bir uygulama yapalım.
Bu uygulama size tanıdık geliyor mu? Dikkat ediyorsanız, okumakta olduğunuz bu sayfa da aynı mantıktan yola çıkılarak hazırlanmıştır. Pencerenin boyutlarıyla oynayarak <center> kodunun işlevini görebilirsiniz. Unutmayın, <center> kodu ile sadece bir tabloyu değil, her türlü HTML nesnesini ortalamak mümkündür.
Dersler / Html / Sayfa İçi Bloklar
şimdi <center> kodundan daha gelişmiş bir bloklama aracını öğrenelim: <div> Bu kod ile HTML sayfalarını kısımlara ayırırız. CSS derslerinde öğreneceğimiz tarz yaratma yöntemleriyle kullanılır genelde. Şimdilik align parametresini kullanabiliriz. <div align="center">...</div> kodları, <center>...</center> kodlarının işlevini görür. span kodu da div koduyla aynı işlevi görür ama span kodunun align parametresi yoktur. Not: <span> kodunu Netscape Navigator 5 desteklemiyor.
Bu uzun uygulamada henüz öğretmediğim style="..." parametrelerini kullandım. Sizler uygulamayı incelediğiniz zaman bu parametrelerin ne işe yaradığını anlamışsınızdır. style="..." parametresiyle veya <style>...</style> kodu ile ilgili ayrıntılı bilgileri CSS derslerimizde göreceğiz. Şimdilik <div> kodu ile sayfa bölümlemesi yapmayı göstermek için kullandım; sizin için de bir ön çalışma olmuş oldu. Bu uzun uygulamayı daha da uzatmamak için <div> kodlarını birer paragrafı kapsayacak şekilde kullandım; elbette bu kodları bir sürü paragrafı kapsayacak şekilde kullanabilirsiniz. Yukarıdaki uygulamada <div> kodu yerine <p> kodunu kullanmak daha mantıklı olurdu; style="..." parametresi bu kod için de geçerlidir. Bu söylediklerim span kodu için de geçerli ama bu kodun align="..." parametresini desteklemediğini tekrar hatırlatırım. (Bu bir eksiklik değil, style="..." parametresiyle bunu kolayca aşarız. Yukarıdaki uygulamayla ilgili son birşey daha: dikkatinizi çektiyse style="text-align:justify" parametresi ile paragrafı iki yana yasladık. (Şimdilik tiyo olarak kullanın, CSS dersinde konunun tamamına hakim olacaksınız, bunları herkes göstermiyor, değerimi bilin.: ) )
Dersler / Html / XHTML DERSİ - Komutların Yazımı
Daha önceki konuda bahsettiğimiz gibi XHTML, HTML üzerine oluşturulmuş bir standarttır ve komutlar HTML komutlarıyla aynıdır. Ancak HTML'de serbestçe yazılan kodlar üzerinde bir takım kısıtlamalar ve kurallar getirilmiştir.
İlk kural tüm komutların KÜÇÜK HARFLE yazılmasıdır. HTML'de komutların büyük veya küçük harfle yazılması fark etmemektedir. Bazı HTML editörleri büyük harfle, bazıları ise küçük harfle yazmaktadır. Ben HTML kodları yeni yazmaya başladığımda, ilk harflerini büyük, diğerlerini küçük yazmaya başlamıştım; şekil olsun diye. XHTML'de ise karmaşa söz konusu değildir, tüm komutlar küçük harfle yazılacaktır.
Kural 1: Komutlar küçük harfle yazılacak.
XHTML'e uygun: <head>, <font>, <p>, <body>
XHTML'e uygun değil: <HEAD>, <Font>, <P>, <BoDy>
HTML derslerinde anlatıldığı gibi, komutlar başlangıç ve bitiş kodları ile yazılmaktadır. Başlangıç ve bitiş kodları < ve > işaretleri arasına yazılır. Bitiş kodlarında < işaretinden sonra / işareti de yazılmaktadır. Ancak HTML'de her zaman bitiş kodunu yazmamız şart değildir. Örneğin sadece <p> kodunu bitiş kodu olan </p> kodu yazılmadanda çalışır; hata mesajı vermez. (İşleyişte tek başına <p> kodunu kullanmakla dokümanın bir satır boşluğu bırakılması sağlanır.
HTML'de bazı kodların bitişinin kullanılmamasında hiç sakınca yoktur. Örneğin <li> komutunu birçok HTML editörü </li> bitiş kodu olmadan kullanmaktadır ve sonuç değişmemektedir. Ancak XHTML'de bitiş kodu kullanılması şarttır.
Bazı komutlarda ise bitiş kodu doğal olarak yoktur. Çünkü başlangıç ve bitiş kodlarının arasına bir kod veya metin yazılması söz konusu değildir. Örneğin <br>, <hr>, <img> komutları <br>...</br> şeklinde başlangıç ve bitiş komutlarıyla yazılamamaktadır. Sadece başlangıç komutu çalışan bu tarz komutlar ise XHTML'deki standardı bozmaması için değiştirilmiştir. XHTML'de bu komutlar başlangıç ve bitiş kodları birleştirilmiştir.
Kural 2: Komutlar bitiş kodlarıyla yazılacak.
XHTML'e uygun: <li>...</li>, <img />, <br />
XHTML'e uygun değil: <li>..., <img>, <br>
HTML komutlarının başlangıç ve bitiş kodları arasında başka HTML komutları olabilir ve bu komutların kodları arasında da başka komutlar olabilir. XHTML'de bu durum geçerlidir. Ancak HTML'de bir komutun başlangıç kodu başka bir HTML komutun içinde, bitiş kodu ise dışında olabilmektedir. XHTML'de ise başlangıç kodu bir başka komutun kodları arasında ise, bitiş kodu da arasında olmalıdır. Yani komutlar iç içe olmalıdır. Bir kısmı içinde, bir kısmı dışında olması XHTML açısından uygun değildir.
Kural 3: Komutlar iç içe yazılacak.
XHTML'e uygun: <b><u>...</u></b>
XHTML'e uygun değil: <b><u>...</b></u>
Dersler / Html / XHTML DERSİ - Parameterelerin Yazımı
XHTML'in komutlar üzerine olduğu gibi parametreler üzerinde de kısıt ve kuralları vardır. HTML'de birçok şekilde yazılabilen parametre ve değerleri XHTML'de standarda bağlanmıştır.
Parametreler de, tıpkı komutlarda olduğu gibi küçük harflerle yazılırlar.
Kural 1: Parametreler küçük harflerle yazılır.
XHTML'e uygun: <a href=",,,">, <p align="…">, <font color="…">
XHTML'e uygun değil: <A HREF="…">, <P Align="…">, <font cOlor="…">
HTML'de parametrelere verilen değer doğrudan yazılabileceği gibi tırnak arasına da alınabilir. XHTML'de ise tüm parametre değerleri " işareti arasına yazılır.
Kural 2: Parametrelere verilen değerler tırnak arasında yazılır.
XHTML'e uygun: <table width="50%">, <p align="right">, <font color="blue">
XHTML'e uygun değil: <table width=50%>, <p align=right>, <font color=blue>
HTML'de bazı parametreler yazılmadan, sadece komutun içine değer yazılabiliyor. Örneğin <input readonly> komutunda readonly değeri ile metin kutusundaki yazıyı değiştirilemez yapıyorduk. XHTML'de ise parametre yazılmadan yapılan bu tarz kısaltmalar kullanılmaz. Onun yerine <input readonly="readonly"> şeklinde yazılmaktadır.
Kural 3: Parametreler yazılmadan, kısaca değerler yazılamaz.
XHTML'e uygun: <dl compact="compact">, <option selected="selected">, <frame noresize="noresize">
XHTML'e uygun değil: <dl compact>, <option selected>, <frame noresize>
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
defer defer="defer"
disabled disabled="diabled"
ismap ismap="ismap"
multiple multiple="multiple"
nohref nohref="nohref"
noresize> noresize="noresize"
noshade noshade="noshade"
nowrap nowrap="nowrap"
readonly readonly="readonly"
selected selected="selected"
HTML'de özellikle Script dillerle beraber kullandığımız name parametresinin yerini XHTML'de id parametresi yer almaktadır.
Kural 4: name parametresi yerine id parametresi kullanılacaktır.
XHTML'e uygun: <div id="katman1">
XHTML'e uygun değil: <div name="katman1">
Kafam basmiyor bu kadar yeter : )
Dersler / Html / Transparan Tablo Mantıgı
Arkadaşlar merhaba bu dersimizde transparan tablo mantıgını ögrenecegiz!
İlk öncelikle tablonun açıklamasını yapalım;
* ) İçerisine yazı, resim, makale v.b. ekleyebildigimiz gibi aynı zamanda arkaplan içerigi veya database 'lerde işlevci meteryaller olarak ta kullanabiliriz.
Şimdi biz htm, html deki transparan tablo mantıgını ögrenecegiz!
İlk öncelikle transparan tablo nedir onu öğrenelim isterseniz.
* ) Transparan tablo, adından da anlaşılacağı üzre sayfamızda kullandıgımız her türlü meteryallerin üzerine çıkarak meteryalleri arka plana atan bir tablo biçimidir.
* ) Transparan tabloda neler yapabiliriz;
- ) Diyelimki; Sayfanızı çok sıkı bi çalışma sonucu güzel bir şekilde tamamladınız fakat sonradan planda olmayan birşeyler çıktı:
- 2-3 Günlük Sayfanızda uyarı yazısı eklemek istiyorsunuz ?
- Free bir web sunucusundan yer aldınız reklamı kaldırmak istiyorsunuz ?
- Tablo üzerine tablo yaparak sayfanıza flash, resim v.b. şeyler koymadan estetik katmak istiyorsunuz ?
.. Ve bunun gibi birçok şeyi transparan tablo kullanarak yapabilirsiniz.
Bunlara örnekler verecek olursak;
Free host reklam kaldırma kodu yazmışız;
Bknz; http://www.warezworld.uni.cc
Başka bir örnek;
Sayadaki resmin üstünü transparan tablo mantıgı ile kapatmışız;
Gelelim Şimdi Transparan Tablo Yapımına
Eger Elinizde Microsoft Fronta Page varsa (sürüm önemli degil express hariç )
Tablo menusune girelim ekle diyelim karşıza çıkacak ekrandan tablo sütün ve satır sayısını belirleyelim
Tablomuz eklenmiş olacak sonraki işlem
- Tablo üstünde sağ tıklayıp properties / özellikler diyelim
sonraki seçenek olarak
- style (sitil ) butonunu tıklayalım
sonraki seçenek olarak
- format (biçim ) butonunu tıklayalım
en son seçenek olarak
- positions (yer )
burada da ABSOLUTE yani üstünde seçenegini tıklayalım ve tablomuz hazır!
Yoksa not defterinde kod yazarak;
<html>
<head>
<meta http-equiv="Content-Language" content="tr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Trasnparan Tablo</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" style="position: absolute; left:82px; top:177px">
<tr>
<td><font color="#FF0000"><b>Transparan tablo</b></font> <a href="http://www.webilisim.com">
www.webilisim.com</a> <a href="http://www.webhocam.com">www.webhocam.com</a>
<span lang="en"><font face="Times New Roman">© </font></span>All right
reserve</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p><img src="Webilisim2.gif" width="351" height="85"></p>
</body>
</html>
-------------- Kod Bitti -----------------
Bu kadar yardımcı olabildiysek ne mutlu !!!
Hackhell'in Üyelerine Özel Html Dersleri
Html'e Giriş
Html'e Giriş
Hypertext Markup Language (HTML ) belgelerin birbirlerine nasıl bağlanacaklarını ve belge içindeki metin ve resimlerin nasıl yerleşeceklerini belirleyen ve etiket (tag ) denilen kod parçalarından oluşan bir sistemdir. Belgeleri birbirlerine bağlamak için kullanılan Hypertext'ler oldukça güçlüdürler. Internet üzerinde yaşayan World Wide Web (Kısaca WWW ya da Web ), HTML sisteminin arkasında etkileşimli, çok platformlu, multimedia ve client/server uygulamaları yaratmak için kullanılır.
Web, formatlı metinler, ses ve resimlerden oluşan "yaşayan" belgelerden oluşur. Bu belgeler Webspace denen alanları oluşturur. Bir webspace tipik olarak,home page etrafında biriken linkli sayfalardan oluşur. Bu linkler webspace içinden bir iç adres ya da dış kaynaklı bir adres olabilir. Bir home page ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır.
Aslında HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser )tarafından verileri nasıl işleyeneceğini belirler.
Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz,okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.
Teknik olarak HTML, Standard Generalized Markup Language (SGML ) Document Type Definition (DTD ) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960'ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language ) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO ) tarafından standart haline getirildi. (Referans numarası: ISO8879:1986 )
Bir SGML belgesi üç ana parçaadan oluşur. İlk parça, tag ile normal metni birbirlerinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret etiketlerini içerir. Bu üç parçanın hepsiaynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür.
Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <P> gibi, bazıları ise açma-kapama olarak kullanılırlar,>B>Dikkat! >/B>gibi.
Dikkat etmeniz gereken nokta: Bütün başlama kodları "<" ve ">" işaretleri arasında, bitirme kodları da "</" ve ">" işaretleri arasında olmalıdır. Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur
Örnek:
Kod:
<TITLE> Ornek Web Sayfasi </TITLE>
<option>Seçiminizi Yapın: </option>Dersler / Html / Katmerler(Layers ) 2.
Bir Önceki derste eklediklerimize göre yapacağımız işlemleri burda sırası ile uygulayacağız. E-bilisim.net üyelerine uyarı. Düz okuyarak geçmeyin muhakkak okuduğunuz alanla ilgili pratik yapın.
Swatches Penceresinden Renklerimizi Seçebiliriz.
"Layer Order" Yaparken Layer Penceremizdeki İşlemler:
Palet de (Renk Seçim Aracı ), Üst renkleri (Foreground )seçiyoruz.
İmajımızı PSD Formatında kaydettikten sonra, Layer özelliklerini biraz daha inceleyelim.
Layer Penceresinden tuşuna basarak yada Layer > New > Layer ile yeni bir Layer açalım. (Shft+Ctrl+N ).
Layer Properties'de Name kısmına, "Dikdörtgen" yazalım. Layer ımız seçili iken (Mavi Renk ) ( Göz ve Fırça açık - görünür olacak ), tekrar Tool Box dan Marquee Tool aracına gidip Rectangular Marquee Tool'u seçerek - bu defa Shift tuşuna basılı tutmadan - istediğimiz büyüklükte bir Dikdörtgen çizelim. Eğer çizim sırasında Shift tuşunu basılı tutarsak çizimimizin Kare olacağını bir kez daha hatırlatalım. Dikdörtgenimizi boyamak için tekrar Swatches penceresinden bir renk seçelim. Bu defa Yeşil'i seçtik (RGB Green ). Bu defa Renk Değişim Aracında üstteki renk "Foreground" Yeşil oldu. Tekrar Tool Box'dan Paint Bucket Tool'u seçip, imajımızda seçili olan dikdörtgenin içine tıklıyoruz. Layer Penceremizde Üçüncü Layer'imiz olan "Dikdörtgen" isimli Layer ımız da da Yeşil renkte bir Dikdörtgenimiz oldu.
Önceden gördüğümüz gibi imajın içinde Layerleri -Layerlerin içindeki resimleri- sürükleyerek taşımak için Tool Box 'tan Move Tool aracını , seçip sürükleyerek taşıyorduk. Move Tool Aracının özelliklerinden bahsedersek, bu aracı seçtiğimizde, Tool Options Bar'a dikkat edersek, "Auto Select Layer" kutucuğunu görürsünüz. Şayet bu kutucuk işaretli değilse, Move Tool Aracını imajımızın içindeki herhangi bir resmin üzerinde sağ tuş ile tıklarsak o resmin hani Layer de olduğu en üstte olmak üzere altındaki bütün Layerlerin listesini gösterir. Buradan Layer Penceresindeki istediğiz Layer'i seçebiliriz. Ancak bu kutucuk işaretli ise Move Tool Aracını hangi resim üzerine tıklarsak, Layer Penceresinde o resmin Layer'ini otomatik olarak seçer.
Üçüncü "Dikdörtgen" Layer'ımızı yaptık
Move Tool ile Tool Options Bar'da "Auto Select Layer"'i Seçmek.
"Move Tool" da iken "Auto Select Layer" seçimini animasyonlu GÖRÜN Aşağıdaki resimde
Layer Penceresinde Layerlede bulunan göz şekline ise tıklarsanız, "Göz" ikonu kaybolur ve o layere ait resim imajımız da görünmez. Resmi tekrar görmek için "Gözün" kaybolduğu ikonuna tekrar tıklayıp "Göz" ikonunu aktif hale getirmemiz gereklidir. Yani istemediğimiz layerleri imajdan silip, sonradan pişman olmaktansa, "Göz" ikonu ile kapatıp, tekrar açabiliriz
Move Tool" Aracının Kullanımını animasyonlu görÜN
Layer Penceremizin Boyutlarını sağ alt köşesinde bulunan noktasından tutup çekerek -yandaki şekildeki gibi- büyültüp, küçültebiliriz.
İmajımızı, tekrar PSD Formatında kaydedelim ( File > Save )
Bitmedi Bi dahaki derse kadar bi çay arası verin.
Fazla sıkılmayın diye dersleri böldüm.
Umarım işinize yarar..
Ayrıca bu konularda sorun yaşarsanız
http://www.e-bilisim.net/Subforum.asp?f=39
Bu Linke tıklayarak soru sorabilir ve en kısa sürede cevap alabilirsiniz.
Dersler / Html / Temel Unsurlar
Bu sayfaya geldiğinize göre HTML öğrenme işinde
ciddisiniz demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya
hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak
için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü
bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. Piyasada
iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat
bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog, HomeSite.. )
diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın ) tarzı
denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage,
Dreamweaver, NetObjects Fusion,.. ). Benim yeni başlayanlara tavsiyem Windows'un
Notepad'i. Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel
editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve
kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen
kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek.
Burada şunu da belirtmek gerekiyor; browserlar
arasındaki yorum farklarından dolayı sayfanız bir browser'da iyi görünürken bir
başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı
teknikleri (css, dhtml gibi ) sadece MS Internet Explorer 4 ve üstü desteklerken
Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı
neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu
yönleri var. Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz
başarı sayfanızı ziyaret eden kişinin kullandığı browser'a mahkum. Hatta
ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan",
"grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti
demektir. Yine de bu kadar karamsar olmayalım.
Bu kadar genel bilgi yeter. Bir sonraki konuda
ilk HTML sayfamızı yapıyoruz.
Dersler / Html / İlk Html Sayfam
ilk HTML sayfamızı yapıyoruz.
Öncelikle çalışmalarınızı saklamak için
kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela
html_ders olsun. Daha sonra bu ad bize lazım olacağından kolaylık olması
için siz de yeni klasöre bu adı verebilirsiniz.
Şimdi de bu klasörü açıp yeni bir metin
belgesi oluşturun (sağ fare/Yeni/Metin belgesi ).
Dosyayı çift tıklayarak açın ve şunları
yazın:
Kod:
<head>
<title>Ylk Sayfam</title>
</head>
<body>
Sayfama Hoşgeldiniz
</body>
</html>Kaydet... ). Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar
dahil ) ve Tamam'a basın.
Notepad'i kapatın, metin dosyasını silin ve
oluşan yeni dosyayı açın. Dosya varsayılan browser'ınız (Internet Explorer,
Netscape Navigator gibi ) tarafından açılacaktır. Şöyle bir görüntü elde
edeceksiniz:
Tebrikler ilk HTML sayfanızı yaptınız.
Şimdi de bu belgeyi nasıl oluşturduğumuzu
birlikte inceleyelim. Birşey dikkatinizi çekti mi? Yngilizce bir takım kelimeler
var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık.
Bu ifadelere tag (etiket ) deniyor. Etiketler etki etmesi istenilen metnin
önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha
sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız
etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde
sonlandırılmak zorunda.
Burada kullandığımız etiketler ve anlamları
şöyle:
<html>...</html>
Tarayıcıya HTML dosyasının başladığını ve
bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.
<head>...</head>
<body>...</body>
Bir HTML belgesi iki bölüme ayrılır: head
(baş ) ve body (gövde ). <head>...</head> etiketleri arasına sayfa hakkında
bilgiler yazılır, meta ve title gibi etiketler burada yeralır. Meta
etiketlerine ileride değineceğiz.
<body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek
kısımlar bu tagler arasında yeralıyor.
<title>...</title>
Title sayfanın başlığını belirtiyor. Burada
yazılanlar browser penceresinin başlığında browser adıyla beraber
gösteriliyor.
Dikkat ederseniz hazırladığımız sayfada sadece
temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket
kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama
Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor.
Yşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp
kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.
Dersler / Html / Metin Biçimleme
Bu bölümde öğreneceğimiz etiketler:
Başlık etiketleri: <h1>...<h6>
Paragraf etiketi: <p>...</p>
Ortalama: <center>...</center>
Diğer etiketler:
<b>...</b>,<i>...</i>,<u>...</u>
HTML'de metin stillerini üç şekilde
belirleyebiliriz:
Düzenlemek istediğimiz metnin hemen önüne
koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi )
biçimlendirme denir.
Sayfanın head (baş ) kısmına koyulan stillere
body (gövde ) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü
biçimlendirme )
HTML dosyasının dışında başka bir stil
dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style
Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize
örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi
geniş imkanlar veriyor.
Birinci metotta her metin için ayrı ayrı stil
belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu
stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus
da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu
Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber )
destekliyorlar.
Burada konumuz birinci metoda göre
biçimlendirmeyi öğrenmek.
Başlık etiketlerinden başlıyoruz. Notepad'i
açıyor ve şu kodları yazıyoruz;
Kod:
<html>
<head>
<title>Başlık Etiketleri</title>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
</body>
</html>yapmamız gerektiği gibi <html>, <head>, <title>
etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve
sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu
metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin
arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6>
etiketleri arasındaki kelimelere belirli büyüklükler verdi.
Şimdi de kendiniz <h1>...<h6>
etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl
olduğunu kavrayın. Hatta iyi bir deneme-yanılma olması açısından örneğin her
seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek
ne gibi etkiler oluşturduğunu gözlemleyin. Denemelerinizin bir kısmında hiçbir
değişiklik olmadığını gözlemleyeceksiniz bunun sebebi, browser'ınızın otomatik
olarak hatayı algılayıp düzeltmesidir.
Diğer etiketleri toplu olarak kullanarak yeni
bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:
Kod:
<html>
<head>
<title>Başlık Etiketleri-2</title>
</head>
<body>
<h1><center>Sayfama Hoşgeldiniz</center></h1>
<p>HTML etiketleri ile, </p>
Yazıları
<b>koyu </b>
<i>italik </i>
ve
<u>altı çizili </u>
olarak yazabiliyorum
</body>
</html>olmalısınız. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz
ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiket biz
sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala
tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek
kaydedin ve diğer taraftan browser'ınızın refresh/reload (yenile ) tuşuna
basarak değişiklikleri gözlemleyin.
Yeni öğrendiğimiz kodlara bir göz atalım:
<center>....</center>
Aradaki metinleri sayfaya göre ortalar. (center )
<b>....</b>
Aradaki metni koyu (bold ) yazar.
<i>....</i>
Aradaki metni eğik (italic ) yazar.
<u>....</u>
Aradaki metni altı çizili (underline )
olarak yazar.
<h1>....<h6>
Başlık (heading ) etiketi. h1 en büyük, h6
en küçük.
<p>....</p>
Aradaki metin paragraf özelliği kazanır.
Sonlandırıldığında, takib eden metin bir satır boşluk bırakılarak ve satır
başına yazılır.
Başladığınız etiketi
sonlandırmayı sakın unutmayın !
Burada bilmeyenler için küçük bir bilgi; bir
html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp
kaynağı görüntüle/view source'u seçtiğimizde Internet Explorer için Notepad,
Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu
gösterecektir.
Dersler / Html / Fontlar ve Kullanımı
<font face="..." size="..." color="...">...</font>
face =
yazıtipinin adı (arial, tahoma, verdana, ... )
size = yazının büyüklüğü (1-7 arası )
color = yazının rengi (red, green gibi renklerin ingilizce karşılığı
yada RGB renk değeri )
Bunlara font etiketinin parametreleri diyoruz.
<font> etiketinin yanısıra öğreneceğimiz bir
diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi
bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de
metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter
tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve
metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu
yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini
kullanıyoruz. Ystisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor.
Buna bir örnek verelim;
Kod:
<html>
<head>
<title>BR etiketi</title>
</head>
<body>
pazartesi
salı
çarşamba
<br>ocak<br> şubat<br> mart<br> nisan
</body>
</html>Yukarıdaki örneğimizde "pazartesi, salı ve
çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize rağmen browser bunu
gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını
tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak
bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere metni bir alt
satıra geçirmek için <br> etiketini kullanıyoruz. Bu etiketin bir özelliği de
sonlandırılmaması.
Şimdi font etiketinin kullanımını bir örnekle
inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font
etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile
gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin
(Başlat/Ayarlar/Denetim Masası/Yazıtipleri ). Buradan yazıtiplerini açarak
inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte
kullandığım yazıtipleri (tahoma, comic sans ms, verdana, arial )
sisteminizde yüklü değilse bunun yerine sizde yüklü olan istediğiniz bir fontu
kullanabilirsiniz.
Kod:
<html>
<head>
<title>Renkler ve Mevsimler</title>
</head>
<body>
<font face="tahoma" size="5" color="#008000">Ylkbahar</font>
<br>
<font face="verdana" size="5" color="#ff0000">Yaz</font>
<br>
<font face="arial" size="5" color="#ffff00">Sonbahar</font>
<br>
<font face="comic sans ms" size="5" color="#0000ff">Kış</font>
<br>
</body>
</html>Her zamankinden farklı olarak ve ilk defa
sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla
yaptık. Aslında bunun bir yolu daha var; o da renk kodu yerine rengin ingilizce
adını yazmak (color="red" gibi ).
Bu konuyu renkler bölümünde ayrıntılı
olarak inceleyeceğiz. Burada yalnız bir kaç örnekle yetinelim:
Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green
Bu renkleri yukarıdaki örnek üzerinde deneyin,
renk kodunu silin ve rengin ingilizce karşılığını yazın.
ÖDEV: Şu ana
kadar öğrendiğimiz etiketleri kullanarak (tabii ki hepsini kullanmak zorunda
değilsiniz ) aşağıdaki görüntüyü browser'da nasıl elde ederiz?
IPUCU
Öğrendiğimiz etiketler şunlardı;
<html>, <head>, <title>,
<body>, <p>, <center>, <b>, <u>, <i>, <font>
Dersler / Html / Html de Listeler
HTML bize üç tip liste hazırlama imkanı veriyor.
Bunlar;
Sıralı listeler (ordered list )
Sırasız listeler (unordered list )
Tanımlama listeleri (definition list )
Sıralı listeler rakam veya harf yada her ikisini
içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde
imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden
çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir
araçtır.
Sıralı Listeler
Liste içine alınacak metinler <ol>...</ol>
etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve
bittiğini belirtir. Liste maddelerinin başına ise <li> (list item )
etiketini getiriyoruz. Bu etikette tıpkı <br> etiketi gibi
sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla
listemizin rakamla mı harfle mi başlayacağını (type ) yada hangi
rakam/harfle başlayacağını (start ) belirtebiliyoruz. Compact
parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını
sağlıyor.
Bundan sonraki örneklerimizde sayfa kodunun
yalnız body (gövde ) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi
sayfanızda tam olarak yazmayı unutmayın.
Kod:
<ol type="1">
<li>Kimya
<ol type="a">
<li>Ynorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="a">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="a">
<li>Sayılar
<li>Diğer
<ol type="i">
<li>Türev
<li>Yntegral
</ol>
</ol>
</ol>Organik
Inorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
Yntegral
Listeleri buradaki örnekte olduğu gibi iç içe
hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi ile
başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek
ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste
içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra
tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen
uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar
olabilir; sayılar, harfler (küçük/büyük ) ve romen rakamları (i,ii,iii gibi )
Sırasız Listeler
Bu tip listelerde de mantık aynı. Fark;
listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük
yuvarlaklar, kareler kullanabilmemiz. <ol> etiketi yerine <ul>
etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi
burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle;
type için disc (içi dolu daire ), circle (içi boş daire ),
square (içi dolu kare ). Compact parametresi sırasız listelerde de
kullanılabiliyor.
Kod:
<ul type="disc">
<li>Kimya
<ul type="square">
<li>Ynorganik
<li>Analitik
</ul>
<li>Fizik
<ul type="square">
<li>Dinamik
<li>Statik
</ul>
<li>Matematik
<ul type="square">
<li>Sayılar
<li>Diğer
<ul type="circle">
<li>Türev
<li>Yntegral
</ul>
</ul>
</ul>Organik
Ynorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
Integral
Tanımlama Listeleri
Bu listelemede kullanılan etiketler şöyle; <dl>...</dl>
, <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız
<li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor.
Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Yine parametre
olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
Hemen örneğimize geçelim,
<font face="verdana" size="4" color="red">Neler öğrendik?</font>
<dl compact>
<dt><font size="3" color="blue">HTML nedir?</font>
<dd><font size="2" color="black">HTML (HyperText Markup
Language-Hareketli-Metin Yşaretleme Dili ) basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayan
bir çeşit dildir...</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2" color="black">Bu dilde binary veya
hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı
oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editör
bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren...</font>
<dt><font size="3" color="blue">Listeler</font>
<dd><font size="2" color="black">Sıralı listeler rakam
veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız
listeler rakam/harf yerine madde imleri koyarak liste
oluşturmamızı sağlar...</font>
Dersler / Html / Html'de Renkler
Metin renklendirmeyi yüzeysel olarak fontlar
konusunda öğrendik. Şimdi daha ayıntılı olarak ve bu işin mantığına inerek
yeniden ele alacağız. Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.
Renk kodları
Fontlar konusunda, metnin rengini belirlerken
<font color="..."> etiketini kullanmıştık ve color komutunun
karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha
karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek.
Önce sayı düzenleri nedir nasıl olur ona bakalım.
Günlük hayatımızda kullandığımız sayı sistemine
10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan
sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı
sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili
(binary ) ve onaltılı (hexadecimal ) sayı sistemleridir.
ikili sayı sistemi nasıl olur? Bildiğiniz gibi
günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam
vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1 )
ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? Yşte burada
işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk
düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye
bölünür ve kalanlar soldan sağa doğru yanyana yazılır.
Gelelim asıl konumuz olan 16'lık sayı
sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar;
Kod:
0 1 2 3 4 5 6 7 8 9 A B C D E F[10'un karşılığı A ... 15'in karşılığı F'dir.]
Etikette kullandığımız color=#xxxxxx
ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi ) renklerinin karışım
oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında
olabilir (FF maksimum, 00 minimum karışımı verir ).
Buna göre; #000000 siyah,
#FF0000 kırmızı, #00FF00 yeşil,
#0000FF mavi, #FFFFFF beyaz'dır.
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
#000000=black(siyah )
#000080=navy(lacivert )
#0000FF=blue(mavi )
#008000=green(yeşil )
#008080=teal(koyu yeşil )
#00FF00=lime(parlak yeşil )
#00FFFF=aqua(turkuaz )
#800000=maroon(vişne çürüğü )
#800080=purple(mor )
#808000=olive(zeytuni yeşil )
#808080=gray(gri )
#C0C0C0=silver(gümüşi gri )
#FF0000=red(kırmızı )
#FF00FF=fuchsia(parlak pembe )
#FFFF00=yellow(sarı )
#FFFFFF=white(beyaz )
Artalanı Renklendirmek
Bu renklerle yalnızca metinleri değil
sayfamızın artalananını da renklendirebiliriz.
Bunun için <body bgcolor=#xxxxxx>
etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için
yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde
değiştiriyoruz.
Renk kodlarını yazarken daima #
işaretini kullanmayı unutmayın !
Kod:
<body bgcolor="#ffcc00">
<font face="verdana" size="4" color="#ffffff">
<ol><h2><u>Günler</u></h2>
<font color="#0000ff">
<li>Pazartesi
<li>Salı
<li>Çarşamba
<li>Perşembe
<li>Cuma
</font>
<font color="#ff0000">
<li>Cumartesi
<li>Pazar
</font>
</ol>
</font>
</body>Dersler / Html / Ziyaretcinin IP sini Bulma
Sitenizi Ziyaret Eden Kişilerin IP'sini Bulmanıyı Öğrenelim :
Kod:
<% IP = Request.ServerVariables("REMOTE_ADDR" ) %>
Kod:
<%Response.Write IP%>
Veya
<%=IP%>Dersler / Html / Nesne Ortalama Bloğu
İlk tanıtacağım bloklama aracı <center>...</center> kodlarıdır. Bu kodlar arasına yazılan HTML nesneleri sayfanın ortasına yaslanır (merkezlenir ). Özellikle sayfa tasarımında, tabloların her boyuttaki pencereye uyum sağlaması için kullanılır. Küçük bir uygulama yapalım.
Kod:
<html>
<head>
<title>Sayfa Merkezleme</title>
</head>
<body bgcolor="#faebd7">
<center>
<br><br>
<table border="2" bordercolor="#000000" cellspacing="0" cellpadding="15" bgcolor="#ffffff" width="300" height="500">
<tr>
<td valign="top">
Bu sayfa pencerenin büyüklüğüne göre kendisini sayfanın ortasında tutar. (Tabi pencere sayfadan daha büyükse. )
</td>
</tr>
</table>
<br><br>
</center>
</body>
</html>Bu uygulama size tanıdık geliyor mu? Dikkat ediyorsanız, okumakta olduğunuz bu sayfa da aynı mantıktan yola çıkılarak hazırlanmıştır. Pencerenin boyutlarıyla oynayarak <center> kodunun işlevini görebilirsiniz. Unutmayın, <center> kodu ile sadece bir tabloyu değil, her türlü HTML nesnesini ortalamak mümkündür.
Dersler / Html / Sayfa İçi Bloklar
şimdi <center> kodundan daha gelişmiş bir bloklama aracını öğrenelim: <div> Bu kod ile HTML sayfalarını kısımlara ayırırız. CSS derslerinde öğreneceğimiz tarz yaratma yöntemleriyle kullanılır genelde. Şimdilik align parametresini kullanabiliriz. <div align="center">...</div> kodları, <center>...</center> kodlarının işlevini görür. span kodu da div koduyla aynı işlevi görür ama span kodunun align parametresi yoktur. Not: <span> kodunu Netscape Navigator 5 desteklemiyor.
Kod:
<html>
<head>
<title>falan fiLan</title>
</head>
<body>
<div align="center" style="font-size:24pt; color:crimson">
Bir Gölgenin Peşinde
</div><br>
<div style={"text-align:justify"}>
Bir ön öğretimden geçmiş bazı kuşlarda daha da belirgin bir yetenek saptanmıştır. Çok sayıda ustalıkla yapılmış deney, yiyeceğini iki küçük tahıl yığını arasından seçmeyi öğrenmiş bir saka kuşunun, genel olarak üçü birden, üçü ikiden, dördü ikiden, dördü üçten ve altıyı üçten ayırmayı başardığını göstermiştir.
</div><br>
<div style="font-family:comic sans ms; text-align:justify">
Ön öğretim olmaksızın birden üçe ya da dörde kadar giden somut nicelikleri açıkça tanıyabilen bülbüllerin, saksağanların ve kargaların durumu daha da dikkate değer. İşte ünlü bir örnek: Bir şato sahibi şatonun gözetleme kulesine yuva yapan bir kargayı öldürmeye karar vermiş. Kuşu birçok kez ansızın yakalamaya çalışmış, ama o yaklaşınca karga yuvasını terkedip yakındaki bir ağaca konuyor, adam kuleden ayrılır ayrılmaz geri dönüyormuş. Sonunda bir gün bir hileye başvurmuş adam: Arkadaşlarından ikisini kuleye çıkarmış; bir süre sonra biri çekip giderken öteki kulede kalmış. Ama bu oyunu yutmayan karga, yerine dönmek için ikincisinin de gitmesini beklemiş. Sonraki sefer ikisi daha sonra uzaklaşacak olan üç kişi çıkılmış.: Üçüncü adam kargayı yakalama fırsatı bulurum diye bekleyedursun, kanatlı kurnaz ondan çok daha sabırlı çıkmış. Deney birçok kez baştan alınmış, ama hep başarısız. Sonunda hilenin dört ya da beş kişiyle işe yaradığı, karganın aynı anda üç ya da dört kişiden fazlasının varlığını görsel olarak kavrayamadığı ortaya çıkmış.
</div><br>
<div style="color:#0000ff">
Bu davranışlar çok ilginç, çünkü hayvanlarda zaten bulunan insan güçlerinin modellerini oluşturuyorlar.
</div><br>
<div style="font-family:courier">
Evcil hayvanlar örneğinde kümelerin eşitliği ya da eşitsizliği kavramının gelişmemiş bir çeşit algısı söz konusu, ama ancak sayıca düşük öbeklemelerde kendini gösteren bir algı.
</div>
</body>
</html>Dersler / Html / XHTML DERSİ - Komutların Yazımı
Daha önceki konuda bahsettiğimiz gibi XHTML, HTML üzerine oluşturulmuş bir standarttır ve komutlar HTML komutlarıyla aynıdır. Ancak HTML'de serbestçe yazılan kodlar üzerinde bir takım kısıtlamalar ve kurallar getirilmiştir.
İlk kural tüm komutların KÜÇÜK HARFLE yazılmasıdır. HTML'de komutların büyük veya küçük harfle yazılması fark etmemektedir. Bazı HTML editörleri büyük harfle, bazıları ise küçük harfle yazmaktadır. Ben HTML kodları yeni yazmaya başladığımda, ilk harflerini büyük, diğerlerini küçük yazmaya başlamıştım; şekil olsun diye. XHTML'de ise karmaşa söz konusu değildir, tüm komutlar küçük harfle yazılacaktır.
Kural 1: Komutlar küçük harfle yazılacak.
XHTML'e uygun: <head>, <font>, <p>, <body>
XHTML'e uygun değil: <HEAD>, <Font>, <P>, <BoDy>
HTML derslerinde anlatıldığı gibi, komutlar başlangıç ve bitiş kodları ile yazılmaktadır. Başlangıç ve bitiş kodları < ve > işaretleri arasına yazılır. Bitiş kodlarında < işaretinden sonra / işareti de yazılmaktadır. Ancak HTML'de her zaman bitiş kodunu yazmamız şart değildir. Örneğin sadece <p> kodunu bitiş kodu olan </p> kodu yazılmadanda çalışır; hata mesajı vermez. (İşleyişte tek başına <p> kodunu kullanmakla dokümanın bir satır boşluğu bırakılması sağlanır.
HTML'de bazı kodların bitişinin kullanılmamasında hiç sakınca yoktur. Örneğin <li> komutunu birçok HTML editörü </li> bitiş kodu olmadan kullanmaktadır ve sonuç değişmemektedir. Ancak XHTML'de bitiş kodu kullanılması şarttır.
Bazı komutlarda ise bitiş kodu doğal olarak yoktur. Çünkü başlangıç ve bitiş kodlarının arasına bir kod veya metin yazılması söz konusu değildir. Örneğin <br>, <hr>, <img> komutları <br>...</br> şeklinde başlangıç ve bitiş komutlarıyla yazılamamaktadır. Sadece başlangıç komutu çalışan bu tarz komutlar ise XHTML'deki standardı bozmaması için değiştirilmiştir. XHTML'de bu komutlar başlangıç ve bitiş kodları birleştirilmiştir.
Kural 2: Komutlar bitiş kodlarıyla yazılacak.
XHTML'e uygun: <li>...</li>, <img />, <br />
XHTML'e uygun değil: <li>..., <img>, <br>
HTML komutlarının başlangıç ve bitiş kodları arasında başka HTML komutları olabilir ve bu komutların kodları arasında da başka komutlar olabilir. XHTML'de bu durum geçerlidir. Ancak HTML'de bir komutun başlangıç kodu başka bir HTML komutun içinde, bitiş kodu ise dışında olabilmektedir. XHTML'de ise başlangıç kodu bir başka komutun kodları arasında ise, bitiş kodu da arasında olmalıdır. Yani komutlar iç içe olmalıdır. Bir kısmı içinde, bir kısmı dışında olması XHTML açısından uygun değildir.
Kural 3: Komutlar iç içe yazılacak.
XHTML'e uygun: <b><u>...</u></b>
XHTML'e uygun değil: <b><u>...</b></u>
Dersler / Html / XHTML DERSİ - Parameterelerin Yazımı
XHTML'in komutlar üzerine olduğu gibi parametreler üzerinde de kısıt ve kuralları vardır. HTML'de birçok şekilde yazılabilen parametre ve değerleri XHTML'de standarda bağlanmıştır.
Parametreler de, tıpkı komutlarda olduğu gibi küçük harflerle yazılırlar.
Kural 1: Parametreler küçük harflerle yazılır.
XHTML'e uygun: <a href=",,,">, <p align="…">, <font color="…">
XHTML'e uygun değil: <A HREF="…">, <P Align="…">, <font cOlor="…">
HTML'de parametrelere verilen değer doğrudan yazılabileceği gibi tırnak arasına da alınabilir. XHTML'de ise tüm parametre değerleri " işareti arasına yazılır.
Kural 2: Parametrelere verilen değerler tırnak arasında yazılır.
XHTML'e uygun: <table width="50%">, <p align="right">, <font color="blue">
XHTML'e uygun değil: <table width=50%>, <p align=right>, <font color=blue>
HTML'de bazı parametreler yazılmadan, sadece komutun içine değer yazılabiliyor. Örneğin <input readonly> komutunda readonly değeri ile metin kutusundaki yazıyı değiştirilemez yapıyorduk. XHTML'de ise parametre yazılmadan yapılan bu tarz kısaltmalar kullanılmaz. Onun yerine <input readonly="readonly"> şeklinde yazılmaktadır.
Kural 3: Parametreler yazılmadan, kısaca değerler yazılamaz.
XHTML'e uygun: <dl compact="compact">, <option selected="selected">, <frame noresize="noresize">
XHTML'e uygun değil: <dl compact>, <option selected>, <frame noresize>
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
defer defer="defer"
disabled disabled="diabled"
ismap ismap="ismap"
multiple multiple="multiple"
nohref nohref="nohref"
noresize> noresize="noresize"
noshade noshade="noshade"
nowrap nowrap="nowrap"
readonly readonly="readonly"
selected selected="selected"
HTML'de özellikle Script dillerle beraber kullandığımız name parametresinin yerini XHTML'de id parametresi yer almaktadır.
Kural 4: name parametresi yerine id parametresi kullanılacaktır.
XHTML'e uygun: <div id="katman1">
XHTML'e uygun değil: <div name="katman1">
Kafam basmiyor bu kadar yeter : )
Dersler / Html / Transparan Tablo Mantıgı
Arkadaşlar merhaba bu dersimizde transparan tablo mantıgını ögrenecegiz!
İlk öncelikle tablonun açıklamasını yapalım;
* ) İçerisine yazı, resim, makale v.b. ekleyebildigimiz gibi aynı zamanda arkaplan içerigi veya database 'lerde işlevci meteryaller olarak ta kullanabiliriz.
Şimdi biz htm, html deki transparan tablo mantıgını ögrenecegiz!
İlk öncelikle transparan tablo nedir onu öğrenelim isterseniz.
* ) Transparan tablo, adından da anlaşılacağı üzre sayfamızda kullandıgımız her türlü meteryallerin üzerine çıkarak meteryalleri arka plana atan bir tablo biçimidir.
* ) Transparan tabloda neler yapabiliriz;
- ) Diyelimki; Sayfanızı çok sıkı bi çalışma sonucu güzel bir şekilde tamamladınız fakat sonradan planda olmayan birşeyler çıktı:
- 2-3 Günlük Sayfanızda uyarı yazısı eklemek istiyorsunuz ?
- Free bir web sunucusundan yer aldınız reklamı kaldırmak istiyorsunuz ?
- Tablo üzerine tablo yaparak sayfanıza flash, resim v.b. şeyler koymadan estetik katmak istiyorsunuz ?
.. Ve bunun gibi birçok şeyi transparan tablo kullanarak yapabilirsiniz.
Bunlara örnekler verecek olursak;
Free host reklam kaldırma kodu yazmışız;
Bknz; http://www.warezworld.uni.cc
Başka bir örnek;
Sayadaki resmin üstünü transparan tablo mantıgı ile kapatmışız;
Gelelim Şimdi Transparan Tablo Yapımına
Eger Elinizde Microsoft Fronta Page varsa (sürüm önemli degil express hariç )
Tablo menusune girelim ekle diyelim karşıza çıkacak ekrandan tablo sütün ve satır sayısını belirleyelim
Tablomuz eklenmiş olacak sonraki işlem
- Tablo üstünde sağ tıklayıp properties / özellikler diyelim
sonraki seçenek olarak
- style (sitil ) butonunu tıklayalım
sonraki seçenek olarak
- format (biçim ) butonunu tıklayalım
en son seçenek olarak
- positions (yer )
burada da ABSOLUTE yani üstünde seçenegini tıklayalım ve tablomuz hazır!
Yoksa not defterinde kod yazarak;
<html>
<head>
<meta http-equiv="Content-Language" content="tr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Trasnparan Tablo</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" style="position: absolute; left:82px; top:177px">
<tr>
<td><font color="#FF0000"><b>Transparan tablo</b></font> <a href="http://www.webilisim.com">
www.webilisim.com</a> <a href="http://www.webhocam.com">www.webhocam.com</a>
<span lang="en"><font face="Times New Roman">© </font></span>All right
reserve</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p><img src="Webilisim2.gif" width="351" height="85"></p>
</body>
</html>
-------------- Kod Bitti -----------------
Bu kadar yardımcı olabildiysek ne mutlu !!!