10 TM-A Sınıfı

Arnavutköy MaeLisesi
 
AnasayfaSSSAramaKayıt OlÜye ListesiKullanıcı GruplarıGiriş yap

Paylaş | 
 

 Html öğrenin

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
TATAR!
Administration
Administration
avatar

Mesaj Sayısı : 757
Yaş : 25
Nerdensin Koçum : TatarCity
Kayıt tarihi : 08/11/07

MesajKonu: Html öğrenin   C.tesi Kas. 17, 2007 1:46 am

Web sayfasında standart olarak bulunması gereken kodlar
şunlardır.Bunlar sayfada mutlaka vardır.Bu kodlarla tarayıcı bunun bir
web sayfası olduğunu anlar ve ona göre görüntüler.[/size]
Sayfanızın tüm içeriği:resim, yazı, video, vb.

Bir web sayfası kodları arasına inşa edilir.
kodları arasında kalan kısım sayfanızın başlık kısmıdır ve tarayıcının
sayfanızı tanımasına, arama motorlarının sizin sitenizi bulmasına yarar.
Bu kodlar içindeki Sayfanıza vermek istediğiniz adın yazıldığı yerdir.Buraya yazdığınız yazı tarayıcının sol üst köşesinde gözükür.
Ayrıca bu kodlar içinde
etiketleri vardır ve bunlarla sitenizi tarayıcıya ve arama motorlarına
tanıtırsınız.Bunlara sırası geldiğinde ileride değineceğiz.
kodları arasında kalan yer de sizin sayfanızın içeriğidir.Yani
tarayıcınızı açtığınızda gördüğünüz her şey buraya yazılır.Tasarım işi
bu kodlar içinde yapılır.İşimiz bu kodların neler olduğunu ve nasıl
kullanıldığını anlatmak...
[/size] Şimdi meta imlerini tanıyalım.
<b>
Kodu sayfanızda ne tür bir metnin olduğunu(text/html yazmakla metnin
düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi
kodlama(windows-1254 yazmakla) ile yapıldığını gösterir.
<b> Kodu sayfanızın dilinin Türkçe(tr yazmakla.İstenirse değiştirilebilir.) olduğunu gösterir.
<b> Kodu sayfanın tasarımcı kimliğini gösterir.
<b> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<b> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.!!!!!
<b> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
<b> Kodu sayfanın hangi editörle yapıldığını gösterir.
<b> Kodu sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
<b> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir.GENERAL yazmakla bütün katagoride olduğu belirtilmiş oldu.
Bu imler dedik ya arama motorları için önemlidir.Yani sizin sitenizin başkaları tarafından bulunmasını saylayan kodlardır.
En önemlileri <b>
'dir. Bu imdeki kelime yazılacak yere bir ziyaretçinin arama motorunda
yazabileceği kelimeler yazılmalıdır.Tabii ki bunu yazarken sitenizle
ilgili olan kelimeler olmalı. Gereksiz yere kelime yazılmamalıdır.
Örneğin; bir ziyaretçi arama motoruna "kişisel siteler" yazdığında
arama motoru hem "kişisel" hem "siteler" hem de "kişisel siteler"
kelimelerinin geçtiği siteleri arar.Tabii ki kendi veritabanında olan
sitelerde. Bunun için o arama motoruna kayıt olmalısınız. Eğer sizin
siteniz bir kişisel site ise sitenizin bu imine bu kelimeleri
eklemelisiniz ki arama sonuçlarında olabilesiniz.Eğer yazmazsanız
sonuçlarda olmayabilirsiniz.
Kelimeleri
yazarken ziyaretçinin arama motoruna yazabileceği kelimeleri düşünerek
yazmalısınız.Kelimeler arasında bir virgül( ,) ve bir boşluk olmalıdır.
Örneğin;
<b> gibi.
Bazı yerlerde Türkçe karakter kullanmayın denilir. Ama siz yine de kullanın.En
iyisi hem Türkçe olan hem de Türkçe karaktersiz kelimeleri
yazmanızdır.Bir kelimeyi gereksiz yere tekrar tekrar yazmanızın bir
anlamı yoktur.Bunu arama motorları yemez.
Body imi hakkında
Web sayfamızın içeriğini imleri arasında oluşturacağımızı söylemiştik. Ayrıca imi içinde kullanılan bazı kodlar(öznitelikler) olacak. Bunlar bazı işlerimize yarayacak. Javascript kodlarının bazıları da bu im içine yazılır.
Bu kadar şeyden sonra kaydettiğimiz web sayfamıza bir şeyler yazdırmaya ve içeriğin ilk adımını atmaya ne dersiniz.
Şimdi bir not defteri uygulaması açın ve içine web sayfamızın temel yapı taşları olan;
kodlarını yazın ve merhaba.html diye kaydedin. Sonra merhaba.html
dosyasını açın. Başlık kısmının "Web Tasarımı" olduğunu görün. Sayfada
başka hiç bir şey yok değil mi? Hadi "Merhaba Web Tasarımı" yazdıralım.
Not defterine yazdığınız yukarıdaki kodların imleri arasına "Merhaba Web Tasarımı" yazın.
Yani Web Tasarımı ....
Sonra kaydedin ve web sayfasını açın. Başlığının yine "Web Tasarımı"
olduğunu ve içine "Merhaba Web Tasarımı" yazdığını görüyorsunuz değil
mi? Görmeniz lazım.Göremiyorsanız yanlış bir şeyler yapmış olmalısınız,
kontrol edip düzeltin.

Sayfa rengini ayarlamak

Yukarıdaki gibi yaptığımız web sayfasına baktığınızda sayfa renginin
beyaz olduğunu göreceksiniz. Bu renk hoşunuza gitmeyebilir ve
değiştirmek isteyebilirsiniz değil mi? Bu nasıl olacak peki.Şimdi sıra
buna geldi...
Hani demiştik ya iminin içine bazı şeyler yazılacak ve bunlar işimize çok yarayacak diye. İşte sayfamızın rengini de iminin içine bir öznitelik yazarak değiştirebiliyoruz.
Bu öznitelik
BGCOLOR="Renk Adı" dır.


Kullanımı [size=12]BGCOLOR="Renk Adı"> şeklindedir.

Buradaki "Renk Adı" yazdığımız yere ya İngilizce renk adları yazılır(kırmızı=red, siyah=black vb...) ya da renk kodları(kırmızı=red=#FF0000) yazılır. Bu renk kodlarının bütün listesini yandaki ipuçları bölümündeki renk kodları linkine tıklayarak erişebilirsiniz.
Dikkat edilmesi gereken bir husus, body ile
BGCOLOR arasında bir boşluğun olmasıdır.Bu boşluk mutlaka olmalı yoksa kod çalışmaz.
Sayfa rengini resim olarak ayarlamak
Sayfamızın rengini değiştirmek için sadece renk adları ve kodları
kullanmayız. Belki bu renkleri beğenmeyebiliriz ve istediğimiz bir
resmi sayfanın arka planına yerleştirebiliriz.Tıpkı bilgisayarınızın
masa üstündeki resmi değiştirmek gibi. Bunlar aynı şeylerdir .Bu kod da
imi içrisine yerleştirilir.
Bu öznitelik
BACKGROUND="Resim Adı"> dır.


Kullanımı [size=12]BACKGROUND
="Resim Adı"> şeklindedir.



"Resim Adı" yazdığımız yere sayfanın arka planını hangi resimle değiştirmek istiyorsak bu resmin adını yazmalıyız.

Dikkat edilmesi gereken husus bu resim adının ve uzantısının doğru yazılmasıdır.
Örneğin; resim.jpg, resim.gif, resim.bmp vb. Bir
de resmin adresinin doğru yazılması gerekir. Eğer resim web sayfamızın
bulunduğu dizinin içinde ise sadece resmin adını yazmamız yeter.Ama
sayfanın içinde bulunduğu dizin içindeki bir dizinde ise bu sefer ./dizin adı/resim adı şeklinde olmalıdır.


Örneğin; sayfamız WEB klasörü içinde olsun. WEB klasörü içinde de biR
"resimler" klasörü olsun, resmimizin adı benimresmim.jpg olsun ve
resmimiz resimler klasörünün içinde olsun.

O zaman [size=12]BACKGROUND
="./resimler/benimresmim.jpg"> yazmamız gerekir.


Ayrıca dikkat edilmesi gereken diğer bir hususta body ile
BACKGROUND arasında bir boşluğun olmasıdır. Bu boşluk olmazsa kod çalışmaz.

Metni Kalın, Italic, Altı ve Üstü Çizili Yapmak
Word
programını hepiniz kullanmışsınızdır. Metninizi biçimlendirmek için
metni seçer ve kalın için K, italic için T, altını çizmek için de A yı
tıklardınız.


Web sayfasını tasarlamada ise metni kalın yapmak için , italik yapmak için , altı çizili yapmak için ve üstü çizili yapmak için de imleri kullanılır.

Kalın Yapmak: kalın olmayacak metin(şart değil) Kalın yapılacak metin kalın olmayacak metin(şart değil).

Italik Yapmak: Italic olmayacak metin(şart değil) Italik olacak metin Italic olmayacak metin(şart değil).

Altı Çİzmek: Çizgisiz metin(şart değil) Altı çizilecek metin Çizgisiz metin(şart değil).

Üstü Çizmek: Çizgisiz metin(şart değil) Üstü çizilecek metin Çizgisiz metin(şart değil).


Bunları hepsi de istenilen kadarı da birlikte kullanılır.


Örneğin; [b]
Metin

Örneğin;

metin


Dikkat edilmesi gereken husus ilk başa yazılan im bitişte en sona
yazılıyor.Yani 1.2.3 şeklinde başlayan sayılar 3.2.1 şeklinde
bitmeli(İmleri bunlara benzettiğimizi düşünelim).

Metnin yzı tipini ayarlamak
Web
sayfanızın içeriğini hazırlarken yerleştireceğiniz metinlerin yazı
tiplerini ayarlamak isteyebilirsiniz.Word kullanırken metni seçip
biçimlendirme araç çubuğundaki yazı tiplerinden birini seçtiğinizde
metninizin yazı tipi değişir ve istediğiniz gibi olur.Bunu tabii ki de
html ile kullanarak yapabilirsiniz.Html 'nin asıl amacı metin biçimlendirmektir.


Bu imi ile yaparız.Tabii ki bu im tek başına işe yaramaz bunun öznitelikleri vardır.Bu öznitelikler metnin tipini, rengini ve boyutunu ayarlamaya yarar ve hepsi birbirinden farklı olmalarına rağmen aynı im içinde kullanılırlar.

Metnin Tipini Değiştirmek: FACE
="yazı tipi adı">Yazılacak Metin


FONT ile
FACE arasında bir boşluğun olduğuna dikkat edin.Bu diğerleri gibidir.Boşluk olmazsa çalışmaz.

"Yazı tipi adı" yazdığımız yere yazı tiplerinin adlarını
yazmalısınız.Bunları bilgisayarınızdaki word programını açarak
öğrenebilirsiniz.

Örneğin;FACE
="tahoma">Merhaba web tasarımı.Web sitesi tasarlamak eğlenceli


Birden çok yazı tipi yazabilirsiniz.Bunun için her yazı tipi arasına virgül(,) koymalısınız.

Böyle yaparsanız metniniz sadece ilk yazdığınız yazı tipi ile biçimlendirilecektir.Diğerleri ne olur ne olmaz misalidir.

Boyutu ayarlamak
Yazdığınız metnin boyutunu da ayarlamak isteyebilirsiniz.Metninizin ne kadar küçük ya da büyük olmasına karar verebilirsiniz.


Bunu yine font iminin içine yazılan size özniteliği ile sağlarız.
Metin Boyutunu Ayarlamak: SIZE
="boyut">metniniz


FONT ile
SIZE arasında boşluk var.

"boyut" yazdığımız yere 1 den 7 ye kadar sayı yazabilirsiniz(1 ve 7 dahil).

Örneğin: SIZE
="5">merhaba web tasarımı


Metnin rengini ayarlmaak


Sayfanızın rengini değiştirmeyi isteyebileceğiniz gibi metninizin
rengini de değiştirmek isteyebilirsiniz.Hep siyah yazmaktan bıkmış
olmalısınız değil mi?


Bunun için yine font imini ve onun özniteliği olan
COLOR 'u kullanacağız.
Metin Rengini Ayarlamak: COLOR
="renk adı">Metniniz


FONT ve
COLOR arasında boşluk var.


"renk adı" yazdığımız yere sayfa rengini değiştirmek için kullandığımız
renkler vardı ya işte onlar yazılmalıdır.Ya renk adının İngilizce
kendisi yada kodu kullanılmalıdır.


Her defasında metinlerin renklerini yazmaktan hoşlanmayabilir ve metin rengini bir kerede de ayarlamak isteyebilirsiniz. Bu durumda sayfanızdaki tüm metinlerin rengi aynı olacaktır.


Bunun için iminin bir özniteliği olan
TEXT imi kullanılır.


Kullanımı:

TEXT
="renk adı yada kodu">


Metin rengini bir resim olarak belirleyemezsiniz.



Alt satıra geçmek
Şu
ana kadar yazdığınız bütün metinler hep yan yana yazıldı.Pencereye
sığmadığı için de alt satıra otomatik olarak kaydırıldı.Ama siz
istediğiniz yerde bir alt satıra geçmek istersiniz mutlaka değil mi?

Alt Satıra Geçmek: Metniniz
Alt Satıra Geçecek olan Metniniz


Bunun sonucu şöyle olacaktır.

Metniniz

Alt Satıra Geçecek olan Metniniz


Sayfadaki öğeleri ortalamak

Sayfanıza koyacağınız metin ya da resimleri ortalamak isteyebilirsiniz.Bunun için kullanılan im
Ortalanmak istenen öğe yada öğeler imidir.


Bu imler arasında kalan öğeler sayfanıza göre ortalanacaktır.Diğer öğeler ise sola hizalanacaktır(eğer değiştirilmemişse).


Örneğin;

Merhaba web tasarımı
[/b]web tasarlamak çok eğlenceli<i>

Sayfaya resim koymak
Resimler
de metinlere benzer. Yani istediğiniz yere istediğiniz resmi
koyamazsınız. Metinleri her bir karakter aralığına yazıyoruz. Resimleri
de bu karakter aralarından bir tanesine yerleştiririz.

Resimleri sayfaya koymak: </size>

IMG ile SRC arasında bir boşluk vardır.SRC resminizin adını ve resmin tam yolunu belirtmeye yarar.


Burada dikkat edilmesi gereken husus resmin adının, uzantısının ve
yolunun doğru yazılmasıdır.Daha önce bu yol ve resim adı bilgisini
vermiştim.


Örneğin; </size>

Resmin boyutunu belirlemek
Resminizin
aslı küçük ama sayfanızda büyük olmasını istiyor olabilirsiniz.Küçük
bir resmin boyutunu büyütürseniz çözünürlüğü bozulur.Yani eski hali
kadar net ve güzel olmaz.


Resmin boyutlarını belirtmek daha kolay yüklenmelerini sağlar.Bu da size zamandan tasarruf sağlayabilir.


Bunun için <img> iminin
WIDTH ve HEIGHT öznitelikleri kullanılır.


Kullanımı: WIDTH
="n" HEIGHT="n"> şeklindedir.


Her nitelik arasında boşluk var.


"n" resminizin boyutunu belirtmek için kullanılan sayıdır.Buraya iki tane n koymam
WIDTH ve HEIGHT değerlerinin aynı olacağı anlamını vermez.Yani değerleri farklı olabilir.

WIDTH yatay uzunluğunu belirtir.

HEIGHT ise dikey uzunluğunu belirtir.


Bir benzetme: Bir dikdörtgenin kısa kenar uzunluğu
HEIGHT, uzun kenar uzunluğu ise WIDTH 'dir.
</i>
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://10tma.newgoo.net
dj_hs_
Administration
Administration
avatar

Mesaj Sayısı : 10
Yaş : 25
Kayıt tarihi : 10/11/07

MesajKonu: Geri: Html öğrenin   C.tesi Kas. 17, 2007 2:27 am

Saol Süper Paylaşımlar...Emeğine Sağlık
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör
 
Html öğrenin
Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» html deneme alanı
» HTML hatalarını kaldır
» html anasayfa problemi
» Html google kayıt
» Portal HTML leri başıma dert.

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
10 TM-A Sınıfı :: Genel :: Herşey-
Buraya geçin: