>
Dummies Guide to Google Blogger Beta


Translate to EnglishTranslate to GermanTranslate to ItalianTranslate to GreekTranslate to FrenchTranslate to PolishTranslate to RussianTranslate to SpannishTranslate to UkrainiaTranslate to BulgarianTranslate to DutchTranslate to FinnishTranslate to IndianTranslate to JapaneseTranslate to NorwegianTranslate to Portugese
 
ozgurcebilgiedin & programindir.forums8.com
 
  DRİVER İNDİR
  Link listesi
  ÜYE OL
  Ziyaretçi defteri
  BEDAVA PROGRAM SERİAL NUMARALARI
  POP-UP EDİTÖR
  HTML TANIMLARI
  PHP MySQL SORGU TÜRLERİ
  TABLET PC NEDİR
  CNC MAKİNALAR
  CNC NEDİR
  CNC PROGRAM YAZMA
  İLGİNÇ BİLGİLER
  TAZEBAMA.DLL
  WİNDOWS 7 SİSTEM KURTARMA RECOVERY DİSC
  OSMANLI İMPARATORLUĞU'NU YÖNETEN PADİŞAJLAR
  WİNDOWS XP ANLAMI NEDİR
  DÜNYA NÜFUSU
  BARKOD NEDİR? ÇALIŞMA ESASLARI
  GÖKYÜZÜ NEDEN MAVİDİR?
  BİLGİSAYAR KISA YOLLARI
  ASGARİ GEÇİM İNDİRİMİ HESAPLAMA
  FİLM KAYNAKLARIVE FORMATLARI
  SİSTEM GERİ YÜKLEME NASIL YAPILIR
  BİLGİSAYARINIZI BAŞKA BİRİNİN YÖNETTİĞİNDENMİ KUŞKULANIYORSUNUZ?
  İNTERNET TERİMLERİ ve ANLAMALARI
  PRATİK BİLGİLER
  ÇEŞİTLİ PROGRAMLAR
  BİLGİSAYAR TEKNİK İP UÇLARI
  WİNDOWS XP NASIL FORMAT ATILIR RESİMLİ ANLATIM
  WİNDOWS VİSTA NASIL KURULUR
  WİNDOWS 7 FORMAT NASIL ATILIR
  WİNDOWS DOS KOMUTLARI
  C# KOMUT SATIRI DERLEYİCİ(CSC.EXE) VE PARAMETRELERİ
  KOMUT SATIRI NEDİR?
  REGEDİT KOMUTU İLE UZAK KULLANICILARA BAĞLANMAK
  ADMİNPAK.MSI
  MİCRASOFT ISA SERVER NEDİR NASIL KULLANILIR NASIL ÇALIŞIR
  UZAK MASA ÜSTÜ BAĞLANTISI NEDİR NASIL KURULUR?
  WİNDOWS 2003 SERVER KURULUMU NASIL YAPILIR
  WİNDOWS 2003 ACTİVE DİRECTORY KURULUMU
  WİNDOWS 2003 ACTİVE DİRECTORY KULLANICI VE GURUP HESAPLARI OLUŞTURMAK
  WİMDOWS XP'NİN ETKİ ALANINA KATILMASI(DOMAİNE)
  WİNDOWS 2003 XP ÜZERİNDE KOTA UYGULAMA
  WİNDOWS 2000 VE WİNDOWS XP HESAP YÖNETİMİ
  WİNDOWS XP SERVİSLERİ VE YAPTIKLARI İŞLEMLER
  WİNDOWS SERVİSLERİ NASIL ÇALIŞIR VE YÖNETİLİR
  ACTİVE DİRECTORY HİZMETİ VE AVANTAJLARI NELERDİR
  FTP NEDİR(FİLE TRANSFER PROTOCOL)NASIL YAPILIR
  DHCP NEDİR KISACA NASIL ÇALIŞIR
  GİZLİ TEHLİKE ROOTKİT NEDİR ROOTKİTLERLE NASIL MÜCADELE EDİCEZ
  İNTRANET NEDİR İNTRANET KULLANMANIN AVANTAJLARI
  KURUMSAL ANTİVİRÜS PROGRAMI SEÇERKEN DİKKAT EDİLMESİ GEREKENLER
  KÜÇÜK VE ORTA ÖLÇEKLİ FİRMALAR VE OFİSLERDE GÜVENLİK
  LİNUX NEDİR?
  MS-DOS(MİCRASOFT DİSK OPERATİON SİSTEM)NEDİR?
  NOVELL NETWARE NEDİR?(ESKİ NOVEL SİSTEMİ HAKKINDA TANITICI BİR YAZI)
  PROXY NEDİR NE İŞE YARA?
  SUNUCU NEDİR NEDEN SUNUCULAR VARDIR SUNUCU İŞLETİM SİSTEMLERİ NELERDİR
  TELNET NEDİR NE İŞE YARAR?
  UNİX NEDİR
  IPCONFİG KOMUTUNUN PARAMETRELERİ
  ÇEŞİTLİ ÜLKELERİN İLGİNÇ YANLARI
  TÜRKİYE CUMHURİYETİ ANAYASASI
  4857 SAYILI İŞ KANUNU
  DİSKLERDE VERİLERİN DEPOLANMA MANTIĞI VE VERİ KURTARMA
  GPS İLE KOORDİNAT BELİRLEME
  İSKİ-UKBS SABİT GNSS İSTASYONLARI
  GPRS NEDİR NASIL KOORDİNAT BULUNUR
  IP KAMERA NEDİR
  GTK NEDİR
  DOSYA UZANTILARI VE ANLAMLARI
  USB NEDİR
  ASCİİ KODLARI
  SİTEMAP
  KART MONTAJI
  İLK BİLGİSAYARLAR
  HTTP NEDİR
  C İLE C++ ARASINDAKİ FARKLAR
  DELPHİ İP UÇLARI
  WİRELESS NETWORK NEDİR
  PORT NEDİR
  BİLGİSAYARA VİRÜS NASIL BULAŞIR
  ÜYELİK FORMU
  HTML RENK KODLARI
  WEB SAYFASI
  MORS ALFABESİ
  BRAİLLE ALFABESİ NEDİR
  RAM NEDİR
  HARD DİSK (HDD) NEDİR
  MONİTÖR
  SES KARTI NEDİR
  İŞLEMCİ NEDİR
  HTML DERSİ2
  BİLGİSAYAR SORUNLARI
  EN ÇOK RASTLANINAN BİLGİSAYAR SORUNLARI
  PROBLEMLER VE ÇÖZÜMLERİ
  GÖREV YÖNETİCİSİNDE ÇALIŞAN ZARARLI DOSYALAR
  DRİVER
  SQL GÖRSEL DERSLER
  C#.NET HAKKINDA BİLGİ
  EXCEL İLE PROGRAM YAZMA
  CRACK NASIL YAPILIR
  Full Tek Link Program İndir
  Forum
© Copyright 2010|2014 ozgurcebilgiedin tüm hakları saklıdır.
HTML TANIMLARI
Html Tanımları

Web sitesi hazırlamak isteyenler için HTML Dersleri

HTML Dersleri
  1. ders HTML Web HTML
  2. ders HTML de Sıkça kullanılan bazı etiketler ; BR B Font ... HTML Font
  3. ders Renkler olmadan olur mu? (html de renk) HTML Color
  4. ders Renklere devam ayrıca HTML sayfasının temel yapısı HTML Body
  5. ders Resimler (img) ve öncekilerin tekrarı HTML image
  6. ders Resimde Yükseklik-Genişlik ve Bir başka sayfaya link vermek HTML Title
  7. ders linkler olmadan olur mu? <a href=""> Tıklanacak kelime </a> a HTML
  8. ders A etiketine devam (target/title özellikleri) bazı etiketlerin tekrarı a target
  9. ders Tablo etiketine giriş (<table> .... </table>) HTML Table
11. ders Resim editörü Picasa 'nın kurulumu Pikasa - Resim Editörü
12. ders Hayvan resimleri konusunda html sayfası yapmak Web sitesi hazırlama
13. ders Table html etiketinin Rowspan ve Colspan özellikleri Rowspan ve Colspan


web sayfası nasıl hazırlanır? (uygulamalı örnekler)


Basit HTML Etiketleri

9/10/2007 -Kategori: HTML Dersleri , Eğitim

Şimdiye kadar gördüğünüz derslerde HTML' ağır toplarıyla tanıştınız. Dersleri dikkatli takip ettiyseniz, artık standart bir web sayfası yapabilirsiniz. Şu andaki bilgilerinizle, görsel, kişisel bir sayfa yapabilirsiniz. Bu sayfayı bedava hosting(web alanı) sunan sitelerden birine atarak webe ilk adımınızı atabilirsiniz.Yalnız bilmelisinizki, daha bilmeniz gereken çok şey var. İyi şeyler yapmak için vakit harcamalısınız. Güzellik çoğu zaman ayrıntılarda gizlidir. Bu dersimizde HTML' göze batmayan ama hayati önem taşıyan özelliklerinden birkaçını huzurlarınıza sunacağım. Bunların tamamı "<>" tagları ile kullanılmakta ve aksini belirtmediğim sürece kapatılması gerekmektedir.

br: Bu etiket, satır atlamak için kullanılır. HTML kodunu tarayıcınız en baştan başlayarak sona doğru sırayla okur. İsterseniz tüm kodları tek satırda da yazabilirsiniz, birşey fark etmez. Ama siz düz metin yazarken enter tuşu ile alt satıra geçtiğinizde tarayıcınız bunu algılamaz ve yazdıklarınızı yanına eklemeye devam eder. Düz metinde o andan itibaren bir alt satıra geçmek için br etiketini kullanırız. br etiketini kapatmaya gerek yoktur. İki kere kullanırsak bir satır boşluk bırakır.

p:HTML' paragraf amak için bu etiketi kullanırız. Bu etiket arasında kalan metinleri paragraf şeklinde düzenler. Kapatılması zorunlu değildir. Kapatılmazsa, metinin sonuna kadar paragraf kabul eder.

b:Bold, yani kalın yazı manasına gelir. Belirgin olmasını istediğiniz yazıları "b" etiketi ile kalın yazabilirsiniz.

i:italik, yani eğik yazı manasına gelir. Belli kelimeleri yada paragrafı eğik şekilde yazmak istiyorsanız, paragrafın yada kelimenin başına ve sonuna "i" etiketi getirilmesi zorunludur.

center:Bu dersin en önemli tagıdır. Türkçe' "ortalanmış" manasına gelir. "center" "/center" etiketleri arasına ayzdığınız yazılar, koyduğunuz resimler, tabolar kısaca herşey sayfaay ortalanır. Bu çoğu zaman şekilde göze hoş gelir.

Yorum (1) Yorum yaz! Kalıcı Bağlantı

Arka Plan Rengini Değiştirmek

9/10/2007 -Kategori: HTML Dersleri , Eğitim

Varsayılan olarak sitenizin arka planı beyaz görünür. Bu sitenize belli bir sadelik, ferahlık getirsede, çoğu zaman bunu değiştirmek isteriz. Farklı bir renk, hatta belli bir fotoğrafla arka planınızı döşemek ister miydiniz? Bu ders işte bunun için. Bunu yapmak içinde her zamanki gibi body etiketini kullanacağız ama bu sefer biraz farklı bir şekilde. Bu sefer kodlarımızı body etiketinin altına değil, bizzat body etiketinin yanına yazacağız. Şöyleki "body bgcolor="#000000" Bu kod arka planı siyah yapacak mesela. bgcolor etiketi arka planın rengini belirlerken kullanılıyor. #000000 ise siyah rengin HTML dilindeki karşılığı. Bunun gibi tüm renklerin karşılıklarını netde aratıp bulabilirsiniz. Şimdi biz yapacağımız örnekte arka planı siyah, yazı renginide beyaz yapalm mesela. Bunun için aşağıdaki kodu kullanmamız gerekir.




Yorum (yok) Yorum yaz! Kalıcı Bağlantı

Sitede Resim Göstermek

8/10/2007 -Kategori: HTML Dersleri , Eğitim

Sitenize resim ekleme işini  "img" etiketimiz üstlenmekte. bu sefer "a href" yerine "img src" bağıntısını kullanacağız. Burdaki src, source yani kaynak manasına gelir. Resminizin webdeki kaynağını buraya yazarsınız. Yani sitenizde resim yayınlamak için, önce onu webdeki bir sunucuya atmanız ve linkini kopyalamanız gerekmektedir. Geri kalan işlemler aynı link vermedeki gibidir.



Yorum (yok) Yorum yaz! Kalıcı Bağlantı

MailTo

8/10/2007 -Kategori: HTML Dersleri , Eğitim

Yazınızda mail adresi vermek istiyorsanız, bunu bir önceki dersimizde anlattığımız link verme konusundaki gibi halledebilirsiniz. Burda farklı olarak kullanacağımız tek şey "mailto" etiketi. Yine "a href" etiketini kullanacağız. Sadece yazıya tıklanıldığında gidilecek olan urlyi yazarken "mailto:mailadresiniz@örnek.com" şeklinde yazmalısınız. Bundan sonra yine tıklanılacak olan nesneyi belirtip, tagları ile birlikte etiketi kapatmalısınız. Pratikte link vermekten pek bir farkı yok gibi.

Yorum (yok) Yorum yaz! Kalıcı Bağlantı

Link Atama

8/10/2007 -Kategori: HTML Dersleri , Eğitim

Sitenize link koymak istiyorsanız, "a href" etiketini kullanmanız gerekir. Bu oldukça basit bir işlemdir ama karışık gibi gözükür. Bunun nedeni işin ayrıntıda gizli olmasıdır. Vereceğiniz linkin birçok özelliği olabilir. Linki yeni pencerede mi, yoksa yeni tabda mı açacağınızı; linkin üstüne mouse ile geldiğinizde orda ne yazacağı vs. gibi işleri bu bölümden ayarlarız.
Link dediğimiz şey, ilgili nesneye tıklandığında gidilen urldir aslında. Burada belirtmemiz gereken iki temel nokta var. Birincisi hangi nesneye link vereceğimiz, ikincisi nesneye tıklanıldığında hangi urlye gideceği. Aşağıda basit bir link uygulaması vardır.


Yorum (4) Yorum yaz! Kalıcı Bağlantı


  • Son Yazılarım

  • 3. HTML Dersi
    Renkler olmadan olur mu? - html de renk (HTML Color)

    Önceki dersimizi hatırlatarak 3. dersimize başlamayı uygun görüyorum.
    Sizden <br> html etiketini , <font> etiketini ve <b> etiketini çalışmanızı istemiştim.
    Ben de sizin gibi çalıştım

    HTML kodları aşağıdaki gibidir:
    etiketin önü <h3> etiketin içi </h3> etiketin sonrası <br> <b>web <br> tasarımı</b> yapmaya başlamış olmanız <br><br> çok güzel. <b>HTML</b> öğrenmek bu işin ilk basamağıdır. <br> Bu işe başladığınıza göre <font size=5>web tasarımına </font> yeteneğinizin olduğunu düşünüyorsunuz. <br> Haydin <font size=7>HTML</font> dersine devam edelim.

    Kodların internet tarayıcısında görüntüsü aşağıdaki gibidir:
    etiketin önü

    etiketin içi

    etiketin sonrası
    web
    tasarımı
    yapmaya başlamış olmanız

    çok güzel. HTML öğrenmek bu işin ilk basamağıdır.
    Bu işe başladığınıza göre web tasarımına yeteneğinizin olduğunu düşünüyorsunuz.
    Haydin HTML dersine devam edelim.

    HTML kodlarının internet tarayıcısında oluşturduğu görüntüyü açıklamaya çalışayım :

    Şimdi dersimize devam edelim ve yeni şeyler öğrenmeye çalışalım.
    Bugün size yazıların renklendirilmesini anlatacağım.

    <b> web sayfası yapmak <font color=yellow> çok zevkli bir iştir. </font> </b>

    yukarıdaki kodu şu şekilde açıklamak istiyorum:
    farkettiyseniz cümlenin tamamı koyu (bold) olduğu halde ilk 3 kelimesi sarı değil.
    Bir tek html etiketiyle web sayfası olmaz.
    birçok html etiketi bir arada bulunduğunda şuna dikkat etmeniz gerekir:
    En son açılan html etiketi ilk önce kapanmalıdır.
    yani Html Etiketleri kapatılırken birbirini kesmemelidir. Aşağıdaki şekli inceleyiniz.



    <font size=5 color=yellow> </font> burada font etiketi iki özellik belirtilerek yazılmış birisi size diğeri color.
    Buradaki color özelliği yellow dan başka şu değerleri de alabilir:
    Black
    white
    red
    gren
    blue
    gray
    maroon
    olive
    navy
    purple
    lime
    aqua
    teal
    fuchsia
    silver

    Bu yukarıdaki renkleri çalışmanızı istiyorum:
    yellow yerine bu renkleri tek tek deneyerek sonuçları internet tarayıcınızda görebilirsiniz.

    Ayrıca birden fazla font etiketi kullanıp bir yazıda farklı renklerde cümleler olmasını da çalışabilirsiniz.

    Bu dersimizi bitirmeden size birşey daha belirtmek istiyorum:
    Okuldaki resim derslerini hatırlarsanız paletin içinde 3 temel renkten farklı oranlarda alıp çok çeşitli renkler elde edebiliyorduk.

    Web tasarımında da RGB diye bir renk sistemi vardır.
    RGB = Red + Green + Blue
    bu üç ana rengi çeşitli oranlarda birleştirerek 16 milyondan fazla renk elde edebiliriz.
    255 x 255 x 255 = 16.581.375 (farklı oranlarla onaltı milyondan fazla renk elde edilir)

    Bu üç ana renkten alabileceğimiz miktar 0 dan 255 'e kadardır.
    örneğin Red = 255 olur diğer iki renk sıfır olursa elimizde yine kırmızı olur.

    (Red = 255) + (Green = 255) + (Blue = 0) = Sarı rengi elde ederiz.
    Okul yıllarınızı hatırlarsanız. Renk paletinde yeşil ve kırmızıyı eşit miktarda birleştirip Sarıyı elde ederdik.
    Bu konuyu inşaAllah 4. dersimizde daha da detaylandırıp pratiğini yapacağız.



    bir dahaki dersimizde buluşmak üzere diyorum.




HTML Dersleri       1     2     3     4     5     6     7     8     9     10     11     12     13    

4. HTML Dersi
Renklere devam ayrıca HTML sayfasının temel yapısı (HTML Body)

Sizinle yeni bir HTML dersinde buluşmak güzel.
Bu dersin sonunda şunları öğrenmiş olacağınızı umuyorum:

1) RGB renk koduyla yazılara renk vermek
2) Websayfanızın tamamına renk vermek
3) HTML sayfasının yapısını öğrenmek
4) <title> </title> etiketini öğrenmek

Önceki dersimizde şu şekilde yazıya renk verdiğimizi hatırlayın
<font color="yellow"> Sarı renkte yazı yazmak </font>.

Aynı işlemi aslında şu şekilde yapmamız gerekiyor; çünkü bütün renklere (16 milyon renge) isim veremeyiz:
<font color="#FFFF00"> Sarı renkte yazı yazmak </font>

Red = FF (255)
Green = FF (255)
Bu iki rengin birleşiminden sarı renk elde ediliyor.
Renk kodlarının 0 dan 255 e kadar değer aldığını söylemiştim. Bu değerler Onaltılık sayma düzeniyle gösterilir.
Onaltılık sayma düzenini bilmiyorsanız aşağıdaki renk oluşturma aracıyla biraz daha fazla vakit geçirmenizi öneriyorum.


  =   Kırmızı (RED)
  =   Yeşil (Green)
  =   Mavi (Blue)
  Onaltılık sayma düzenindeki Renk Kodu (RGB):

Kaçar kaçar eksiltilsin ve arttırılsın

         
         
         
         
         

Elde ettiğiniz renklerle html sayfanızın tamamını renklendirmeye geçmeden önce şu aşağıdaki şekli inceleyelim.
Html yazarken bütün koldarınızın body etiketinin içinde olmasına dikkat ediniz


HTML 'in temel yapısı şu şekildedir.
<html>
    <head>
        <title> Web Tasarım Dersleri </title>
    </head>

    <body>

    Bütün HTML kodlarımız, yazılarımız ve resimlerimiz burada olmalıdır.

    </body>
</html>


Yukarıdaki html sayfasını görmek için buraya tıklayınız.

Html temel yapısı diye verdiğimiz kodların tarayıcıdaki görüntüsü aşağıdaki gibidir.
Dikkat ederseniz <title> Web Tasarım Dersleri </title> html etiketiyle;
internet tarayıcısının en üstünde tarayıcıya isim olan yazıyı belirliyoruz.


web sayfasının içeriği beyaz alanda olmaktadır.
Bunu bütün html kodlarımızı <boyd> </body> html etinin içine yazarak elde etmekteyiz.


internet tarayıcısında açılan sayfanın tümden zemin renginin değiştirmek için <body> tagına bgcolor özelliğini ilave edeceğiz.
<body bgcolor="#FFFF00">
    Bütün HTML içerğimiz burada olmalıdır.
</body>

Bu yukarıdaki kodun da ilave edilmiş şekli aşağıdaki gibidir.
<html>
    <head>
        <title> Web Tasarım Dersleri </title>
    </head>

    <body bgcolor="#FFFF00">

    <font color="#B16308"> Bütün HTML kodlarımız, yazılarımız ve resimlerimiz burada olmalıdır. </font>

    </body>
</html>
Yukarıdaki kod çalıştığında internet tarayıcınızda şöyle bir görüntü oluşur.
Şimdi aklınıza şöyle bir soru gelebilir;
Daha önce sadece body içine gelecek html kodlarını yazıyorduk ve çalışıyordu. Öyleyse neden <html> <head> <body> gibi etiketlere ihtiyaç var?

Hatırlarsanız internet tarayıcısının birçok hatamızı tölara ettiğini (hataların görmezden gelinip düzeltildiğini) söylemiştim.
Hatalı kod yazmayı alışkanlık edinmemenizi tavsiye ederim.

Şu anda bir dahaki dersimize kadar şunları yapmanızı istiyorum (lütfen!)
1) Renk oluşturma aracımı kullanarak çeşitli renkler oluşturun ve body nin bgcolor 'unda deneyin
2) yine çeşitli renkler oluşturup font 'un color özelliğinde deneyiniz.


bir dahaki dersimizde Allah nasip ederse Resimler üzerinde çalışacağız.
bir dahaki dersimizde buluşmak üzere diyorum.

5. HTML Dersi
Resimler (img) ve öncekilerin tekrarı (HTML image)

Yeni bir derste daha sizinle buluşmak güzel.
Şu ana kadar hangi HTML etiketlerini gördük bir gözden geçirelim;

<h1>   </h1>     <h2>  </h2>     <h3>  </h3> ...
Başlık yazmak için kullanılır.
Koyu ve büyük yazı elde edilir.
Başlık yazısının öncesinde ve sonrasında otomatik boşluk olur (paragraf olur).
Bazı arama motorları başlık özelliği olan cümledeki kelimeler aratıldığında sayfanızı öne çıkartır.


<br>
Yazının içinde bu etiket olduğunda etiketten sonraki yazı satır başından başlar.
Aynı anda iki tane kullandığınızda satır başı yapılmadan önce boş bir paragraf oluşur.


<font size="" color="">  </font>
Yazılar üzerinde çeşitli işlemler yapabilirsiniz.
size özelliği ile yazının büyüklüğünü ayarlayabilirsiniz.
color özelliği ile yazıya renk verebilirsiniz.
Rengin ingilizce adını yazmanın yanında RGB koduyla da renk belirtebilirsiniz


<body bgcolor="">    </body>
HTML sayfanızın tamamı bu etiket arasında olmalıdır.
bgColor özelliği ile HTML sayfanıza tümden renk verebilirsiniz.
body etiketinin özellikleri tüm sayfayı etkileyecektir.


<html>    </html>
Bütün web sayfamız bu etiketin arasında olmalıdır.

<b>    </b>
Yazı içerisinde koyu (bold) yazmak istediğimiz kısımları bu etiket ile belirtiyoruz.

<title>    </title>
web sayfanızı adını bu html etiketiyle verebilirsiniz.
internet tarayıcısı (Web Browser) sayfanızı açtığında title daki isim ilgili pencerenin ismi olur.
Arama motorlarında sayfanızın ne ile ilgili olduğuna karar verirlirken title etiketi önemli bir kriterdir.


<head>    </head>
HTML sayfanızın genelini ilgilendiren özellikler bu etiketin arasında olmalıdır.
title etiketi bunlardan birisidir.
ileride META etiketileri diye öğreneceğimiz bazı etiketler vardır. Bu etiketler de head (baş/kafa) dediğimiz etiketin kapsamında olmalıdır.



Bu dersimizde kullanacağımız HTML etiketleri ve özellikleri şunlardır:

<U>   </U>   Altı çizili yazı yazmamızı sağlar
<I>   </I>
  italik yazı yazmamızı sağlar.

align özelliği, bir etiket değil etiketlerin birçoğunda kullanılan bir özelliktir.
align özelliğini aşağıda center değeriyle kullanacağız bundan başka align özelliği left ve right değerlerini de alabilir.
align 'ni <H2 align="center"></H2> şeklinde kullanacağız.

<IMG SRC="...."> Resim dosyalarını HTML web sayfamızda göstermemizi sağlar. SRC ile gösterilecek resmin adını belirtiriz.

Haydi derse başlayalım; aşağıdaki görünümde yukarıda bahsettiğimiz etiketler ve özellikler kullanılmıştır.


Arılar Çiçeklere Yardım Eder


Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim.
Yazmıştı küçük arı hislerini yaşam öyküsünde:
Her günkü gibi sabahın erken vaktinde çıkmıştım yollara.
Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk.
Güneşin doğuşu biz arılara yeni bir fırsattı.
O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim.

Güzel olan renkleri görecek güzel kokular duyacaktım.
Çiçeklere yardım edecektim bugün yine;
İnsanlara anlatacaktım çiçeklerin hem göz hem burun hem kalp hem de dil için olduklarını
Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım.
İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım.
Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım.
Ama o gün ....


Yukarıdaki görüntüyü oluşturan HTML kodu aşağıdaki gibidir.
<html>
 <head>
    <title>
Arıların Çiçeklere Yardımı </title>
 </head>
 <body bgcolor="#A0C0E0">
   <h2 align=center>
Arılar Çiçeklere Yardım Eder </h2>
   <img src="balarisi.jpg"><img src="sariikicicek.jpg"> <br>

Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim.
<br>
<b>
Yazmıştı <u>küçük arı</u> hislerini yaşam öyküsünde: </b>
<br>

<font color="#A000E0" size="4">
<i>

Her günkü gibi sabahın erken vaktinde çıkmıştım yollara. <br> Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk. <br> Güneşin doğuşu biz arılara yeni bir fırsattı. <br> O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim. <br> <br> Güzel olan renkleri görecek güzel kokular duyacaktım. <br> Çiçeklere yardım edecektim bugün yine; <br> İnsanlara anlatacaktım <b> çiçeklerin hem göz hem burun hem kalp hem de <u>dil için</u></b> olduklarını <br> Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım. <br> İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım. <br> Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım. <br> Ama o gün ....
</i>

</font>

   </body>
</html>


Yukarıdaki kodlar hakkında birşeyler söylemek istiyorum. (Çalışmayı tarayıcıda görmek için buraya tıklayınız)

Daha önceki dersimizde şunu söylediğimizi hatırlayın;
<HTML> <Head> </Head> <Body> Bütün html kodları buraya yazılır. </Body></HTML>
Bu bir kalıptır ve bu kalıba uymak zorundayız.

center kelimesinin anlamı merkezdir; Burada başlığımızı web sayfasının ortasına getirmiştir.

<h2 align=center> </h2> Bazı html etiketleri align özelliğini almaktadır burada header etiketi bu özelliği aldı.

balarisi.jpg dosyası ve sariikicicek.jpg dosyaları html dosyanızla aynı yerde olmalıdır.
Bu resimleri bilgisayarınıza alabilmek için resimlerin üzerine fare (mouse) ile sağ tıklayın.
Gelecek olan menüden Resmi farklı kaydetmeyi seçin.
Unutmayın farklı bir yere değil html dosyanızın olduğu yere kaydedin.


HTML sayfanızı internet tarayıcısında açtığınızda yukarıdaki gibi bir görüntü elde ederseniz bu şu anlama geliyor;
Resimler ilgili html sayfanızla aynı yerde değil.
eğer yukarıdaki bir görüntüyle karşılaştıysanız;
img etiketinin src özelliğinde belirtilen isimlerdeki resimlerin olup olmadığını kontrol ediniz.


HTML etiketleri bir birlerini kesemezler:
Açtığımız herhangi bir etiketin içindeyken (o kapanmadan) başka etiket açabiliriz.
Birden fazla etiketi açtığımızda kapatırken dikkat etmeniz gereken şey
en son açılan etiket ilkin kapanmalıdır.
Bu dediğimi şu şekilde örneklemek istiyorum:
<font> etiketini açtık henüz font etiketi kapanmadan (</font>) bir başka etiket açtık <i> (italik yazma).
Bu iki etikette henüz kapanmadı ve biz 3. etiket olan <U> (altı çizilmiş yazı) açtık.

Lütfen Etiketlerin kapatılma sırasına dikkat edin.
en son açılan <u> kapatılıyor </u>
daha sonra <i> kapatılıyor </i>
en son da <font> kapatılıyor </font>

Bu yukarıdaki resimle sizlere HTML etiketlerini kapatırken son açılan etiketi önce kapatmanız gerektiğini anlatmaya çalıştım.
 

Kullanabileceğiniz Bazı HTML Renk Kodları Aşağıdadır.



6. HTML Dersi
Resimde Yükseklik-Genişlik ve Bir başka sayfaya link vermek (HTML Title)

Hoşgeldiniz!
Yeni bir derste daha sizinle buluşmak güzel.
Şu ana kadar hangi HTML etiketlerini gördük?

<h1>   </h1>     <h2>  </h2>     <h3>  </h3> ...
<br>
<font size="" color="">  </font>
<body bgcolor="">    </body>
<html>    </html>
<b>    </b>
<title>    </title>
<head>    </head>
<U>   </U>
<I>   </I>
<IMG SRC="....">

Web tasarımı öğrenme isteğiniz sizi bu derse kadar getirdi; Tebrik ederim
Haydin devam edelim.
Bu dersimizde sizlerle resimlere (<img> html etiketi) yükseklik (height) ve genişlik (width) vermesini göreceğiz.
Resimlere çerçeve (border) vereceğiz.
HTML dosyasında nesneler (kelime/resim vs..) arasına boşluğu &nbsp; ile vermemiz gerektiğini öğreneceğiz.
Ayrıca web sitelerine link vermeyi öğrenmiş olacağız.

Daha önce aldığım fakat hazırlamaya fırsatımın olmadığı bir domain adı var : www.gazeteler-e.gen.tr

Bunu birlikte kodlamaya (sadece html kullanarak) başlayalım.

web sitesinin şu anki görüntüsü resimdeki gibidir. (11 temmuz 2006 Salı 06:21)



Sitenin şu anki görüntüsünü oluşturan HTML kodu aşağıdaki gibidir.
<html>
<head>
     <title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>

<h1> Gazeteler'e linkler<br> şu anda yapım aşamasında...</h1>

</body>
</head>



Şimdi kodlamaya başlayabiliriz:
</h1> tagı kapandıktan hemen sonra bu site için hazırlanmış logomuzu img html etiketiyle yerleştirelim.
logoyu kendi makinanıza almak için; logonun üzerine sağ tıklayıp farklı kaydeti seçiniz.
Logoyu aldıktan sonra html dosyasıyla aynı dizinde olmasını sağlayınız.


<img src="gazetelere-link-logo.jpg">
Çerveve vermek için border özelliğini kullanıp çerçeve kalınlığına da 1 değerini atıyoruz.
<img border=1 src="gazetelere-link-logo.jpg">
ikisi arasında farkı görebilmek için bu iki img tagını da aynı sayfada kaydedelim.
Görüntü için buraya tıklayınız.

ikinci img etiketinden sonra bir <br> ekleyip 3. ve 4. resmin aşağıdaki satırda çıkmasını sağlayacağız.
&nbsp; yi 3. ve 4. resim arasında kullanalım.
<img src="gazetelere-link-logo.jpg">     &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;    <img border=1 src="gazetelere-link-logo.jpg">
Ben 5 tane &nbsp; kullandım herbiri bir karakter kadar boşluk verir. Ben iki resim arasında 5 karakter kadar boşluk elde etmek istiyorum.
Sonuç aşağıdaki gibi olması lazım.

Çalışmamızın şu anki görüntüsü için buraya tıklayınız.

web sayfalarındaki kelime yada harfler arasında birden çok boşluk varsa bunlar web tarayıcıları tarafından tek bir boşlu olarak gösterilir.
HTML de yazılar arasında boşluk vermek için &nbsp; kullanılır;
yukarıda resimler arasında boşluk vermek için kullandığımız gibi.


Şimdi width ve height ile çalışalım. aynı sayfada logomuzu 5. kez çıkartalım.
ekleyeceğimiz resmin yeni bir satırda gelmesi için br tagını bir kez kullanalım.
html etiketleri çeşitli özellikler alabilirler bu özelliklerin değerleri vardır.
img etiketinin width özelliğine biz 300 değerini atayalım
<img src="gazetelere-link-logo.jpg" width=300>
sonucu görmek için buraya tıklayınız.

6. resmi ilave etmeden önce çalışmamıza tekrar bir br etiketi ekleyelim
Bu sefer de img etiketinin height özelliğine değer atayacağız.

<img src="gazetelere-link-logo.jpg" height=235>
sonucu görmek için buraya tıklayınız.

Yeni bir resim eklemeden önce br etiketini kullanmassanız 7. resmimiz 6. nın hemen yanında olacaktır.
Bu son resimde width=100 olsun height=45
<img src="gazetelere-link-logo.jpg" width=100 height=45>

Son bir ekleme daha yapıp bugünkü HTML dersimizi bitirmiş olalım.
<a href="http://www.gazeteler-e.gen.tr"> Gazetelere linkler </a>
Bugünkü çalışmamızın tamamına ait HTML kodları aşağıdaki gibidir
<html>
<head>
<title>
Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>

<h1>
Gazeteler'e linkler<br> ?u anda yapym a?amasynda...</h1>

<img src="gazetelere-link-logo.jpg">
<img border=1 src="gazetelere-link-logo.jpg">

<br>
<img src="
gazetelere-link-logo.jpg">      <img border=1 src="gazetelere-link-logo.jpg">

<br>
<img src="
gazetelere-link-logo.jpg" width=300>
<br>
<img src="
gazetelere-link-logo.jpg" height=235>
<img src="
gazetelere-link-logo.jpg" width=100 height=45>

<a href="http://www.gazeteler-e.gen.tr">
Gazetelere linkler </a>

</body>
</head>


Çalışmamızın son halini görmek için buraya tıklayınız.

inşaAllah bir dahaki dersimiz de <a href="http://www.gazeteler-e.gen.tr">Gazetelere linkler </a> kodunu daha iyi anlamış olacaksınız.

Sizin bir dahaki dersimize kadar yapabileceğiniz pratik şudur:
internetten çeşitli resimleri indirip onlar üzerinde width ve height çalışması yapmak
Dersime katıldığınız için teşekkür ederim.

7. HTML Dersi
linkler olmadan olur mu? <a href=""> Tıklanacak kelime </a> (a HTML)

Çalışkanlığınız için sizi tebrik ederim. Hemen derse geçmek istiyorum.

Geçen hafta başladığımız gazetelere linklerin olduğu websitesinin (www.gazeteler-e.gen.tr) yapımına devam edelim.
Renkler, web tasarımı yapan bizler için vazgeçilmezdir.
Gördüğümüz rengin kodunun ne olduğunu bilmek için çok kullanışlı olan bir program kullanacağız.
Programı yapıp ücretsiz kullanıma sundukları için www.nattyware.com sitesinin sahiplerine teşekkür ederim.
Download Pixie   Yandaki linke tıklayıp indiriniz;


Yukarıdaki download linke tıkladıktan sonra gelen ekrandan kaydete tıklayın.
Aşağıdakine benzer bir ekran gelir.
Gelen ekrandan dosyayı kendi makinanıza kaydedeceğiniz yeri seçiniz.


Masaüstünden (Desktop) başka bir yere kaydettiyseniz lütfen kaydettiğiniz yeri unutmayın!
Kaydeti seçince seçtiğiniz ilgili yere gidip; pixie.zip dosyasını bulunuz.
Paketin içinde pixiesetup.exe yi çalıştırın
Bilgisayarınızdaki sıkıştırılmış dosyaları açamıyorsanız (program kurulu değilse) www.winzip.com 'dan indirebilirsiniz.

Gelecek olan ekranda size kurulumun yapılacağı yer otomatik olarak belirlenmiş olarak gelir.
Farklı bir yere kurulum yapmayacaksanız (gerek olmadıkça başka bir yere kurmayınız!) Install butonuna tıklayabilirsiniz.



Kurmakta olduğumuz program bize beğendiğimiz renklerin renk kodlarını verecek.
Sevdiğimiz renklerin yanında renk uyumunu sağlamayabilmek için resimlerin renk kodlarını elde etmek için de pixie yi kullanacağız.



Kurulum sonrasında ufak ve kullanışlı pixie programımızı çalıştıralım (Run Pixie ye tıklayınız)


Gazeteler-e linkler sitemizin logosunda kullanılan sarı rengin kodunu elde edeceğiz.
Ekrandan renk alma programını (pixie) çalıştırdığınızda aşağıdaki gibi bir ekran gelir.

www.gazeteler-e.gen.tr nin 16 Temmuz 2006 22:21 deki görüntüsü


yukarıdaki görüntüyü veren html kodları aşağıdaki gibidir:
<html>
<head>
<title>
Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>

<img src="
gazetelere-link-logo.jpg" border=0>

   <u> <h4>
Ulusal Gazeteler : </h4> </u>

Akşam | Bugün | Cumhuriyet | Dünya | Evet | Evrensel | Fanatik | Fotomaç | Güneş | Tercüman | Hürriyet | Kurultay | Milli Gazete | Milliyet | Ortadoğu | Radikal | Sabah | Star | Takvim | Türkiye | Vakit | Vatan | Yeni Asya | Yeniçağ | Yeni mesaj | Yeni Şafak | Zaman

   <h4> <u> Yerel Gazeteler : </u> </h4>

</body>
</head>


Html kodlarına dikkat ettiyseniz birinde u etiketi h4 etiketinden önce açılıp kapatılmış diğerinde ise tersi sözkonusu.
İki şekilde doğru kodlamadır. Önce açılan etiket kapatılmadan sonraki açılan etiket kapatılsaydı YANLIŞ OLURDU.
Örenğin şu şekilde olsaydı yanlış olurdu:
<u> <h4> Ulusal Gazeteler </u> </h4> Burada iki etiket birbirini kestiği için hatalı bir html sözkonusudur.

Yukarıdaki görüntüyü oluşturabilmeniz için html dosyanızla aynı yere logoyu kaydetmeniz gerekiyor.
Kaydetmek için www.gazetler-e.gen.tr yi açtığınızda logonun üzerine sağ tıklayın ve gelen menüden resmi farklı kaydeti seçin.
Kaydedilecek yeri seçin ve dosyanın adını belirtip kaydetme işlemini tamamlayın.
Unutmayın çalışma yaptığınız dosya ile aynı yerde olmassa şu şekilde bir görüntünüz olur:


pixie ile aldığımız sarı rengin kodunu (F7F79D) body tagının bgcolor özelliğinde kullanacağız.
<body bgcolor="#F7F79D">
Şimdi a etiketine geçip sitedeki gazetelere link vereceğiz.

Anchor = Gemilerin demirlemek için attıkları çapa anlamına geliyor. Yani bağlantı sağlamak.
href : A html etiketinin href özelliği bağlantı sağlanacak URL 'in (adres) yada bağlantı sağlanacak noktanın belirtilmesi içindir.
Bağlantı verilecek web sayfası kendi sitemiz dışında ise http://www.siteninadi.com/ ile başlamalıdır. daha sonra da sayfa adı olmalı.
kendi web sitemizdeki bir sayfaya link vermek için <a href="sayfaninadi.html"> 2. HTML Dersi </a> şeklinde kullanmalıyız.

Bir başka siteye link verirken bir web sayfasının adı belirtilmemişse o sitenin anasayfasına bağlantı (link) verilmiş olur.
örneğin href="http://www.websiteleri.gen.tr"
eğer www.websiteleri.gen.tr deki bir sayfaya link vereceksek o durumda da
href="http://www.websiteleri.gen.tr/bilgisayar/web-yazilim.php" şeklinde verebiliriz.
Burada web-yazilim.php dosyası bir klasörün içinde (bilgisayar klasörünün içinde)
eğer bilgisayar klasörünün içinde olmasaydı ....gen.tr/web-yazilim.php şeklinde olacaktı.

Özet olarak şunları söyleme çalıştım:
href 'in alabileceği değer bir dosya adı olabilir (ikinciders.html)
href 'in alabileceği değer bir sitenin adresi olabilir (http://www.websiteleri.gen.tr)
href 'in alabileceiği değer bir sitedeki herhangi bir dosya olabilir (http://www.websiteleri.gen.tr/htmldersleri.html)
href 'in alabileceği bir diğer değeri sonraki dersimize bırakıyorum.

Şu anda www.gazeteler-e.gen.tr deki gazete isimlerine linkler (bağlantılar) verilmiş şekilde
www.gazeteler-e.gen.tr nin şu anki (19 temmuz 2006 01:14) durumunu görmek için buraya tıklayınız;
Daha sonra açılan sayfadaki boş bir yere sağ tıklayın.
Gelen menüden kaynağı görüntüle seçeneğini seçip sayfanınhtml kodlarını inceleyin.

HTML dersine katıldığınız için teşekkür ederim.

Sizin ödeveniz şu olsun internette sörf yaparken bazı sitelerde kaynağı görüntüle (view source) yaparak gelen kodu şöyle bir gözden geçirmeniz.

8. HTML Dersi
A etiketine devam (target/title özellikleri) bazı etiketlerin tekrarı (a target)

Hoşgeldiniz!

Bu dersimizde öğreneceğimiz bilgiler:
html kodlarının arasına açıklama satırları yazmak (<!-- Açıklama -->)
Tıklandığında yeni bir sayfada açılıp açılmayacağının belirtilmesi ( <a target="_blank" ...)
Tıklanacak kelimenin (link verilmiş kelimenin) üzerine gelindiğinde sarı renkli açıklamanın gösterilmesi (title="...")

Tekrar edeceğimiz bilgiler
<b> ve <u> etiketlerini tekrar hatırlayacağız.
<a href=""> </a> link verme işlemi
&nbsp; Birden çok boşluğa ihtiyacımız varsa bu html etiketini kullanıyoruz.
<br> kendinden sonraki şeyleri alt satıra atar (yeni satır)

Önceki dersimizde Ulusal gazetelere linkler vermiştik.
Yerel gazetelere link vermek için yerel gazeteler şeklindeki başlığımız hazırdı.

Şimdi illeri o başlığın altına sıralayalım.
Her bir il koyu yazılsın diye <b> ADANA : </b> şeklinde illeri yazıyoruz.
Her bir satıra bir il gelmesi için ilden sonra <br> tagını kullanacağız.

Html çalışmasının internet tarayıcısında görüntüsü aşağıdaki gibidir. Görüntünün tamamı için buraya tıklayınız.


Yukarıdaki görüntüye ait HTML kondunun bir parçası aşağıdaki gibidir.
Burada dikkatinizi çektiğim şey birden fazla boşluk ihmal edilip tek boşluk olarak gösteriliyor.
İnternet tarayıcısının bu davranışından dolayı birden fazla boşluk vermek istediğimizde &nbsp; yi kullanacağız.
HTML kodundaki kırmızı çizgileri, ADANA ve ADIYAMAN dan sonraki boşlukların fazlalığını göstermek için çizdim.

Yukarıda bir parçasını gördüğünüz kodun tamamını görmek için:
a) Önce sayfayı buraya tıklayarak açın
b) Daha sonra açılan sayfada boş bir yere sağ tıklayıp menünün gelmesini sağlayın.
c) önceki dersimizdeki gibi gelen menüden Kaynağı Görüntüle yi seçin

şu anda kodun tamamını görüyor olmalısınız.

Şimdi illeri sağ kenardan biraz içeri doğru çekmek istiyorum. Bunu boşluk vererek yapamacağımızı söylemiştim.
&nbsp; kullanarak yapacağız.
&nbsp; &nbsp; &nbsp; &nbsp; şeklinde bütün illerin başına ekleyip kenardan 4 boşluk kadar illeri uzaklaştırdım.
Dosyanın şu anki hali için buraya tıklayınız.
Kodu görmek için açılan web sayfasında boş bir yere sağ tıklayıp açılan menüden kaynağı görüntüle yi seçebilirsiniz.

HTML sayfalarında <!--     --> Bu iki işaret arasına açıklama yazabiliriz.
Bu açıklamayı internet tarayıcısı göstermez.
Açıklama satırlarını görmek için; kaynağı görüntüle yapabiliriz.
Bu şekilde bütün HTML kodlarıyla birlikte açıklamaları da görebiliriz.

<a href="http://www.yenisafak.com.tr/"> Yeni Şafak </a> |
<a href="http://www.zaman.com.tr/"> Zaman </a>

    <h4> <u> Yerel Gazeteler : </u> </h4>

<!--
Burası internet tarayıcısı tarafından gösterilmez
Buraya web tasarımı yapan kimse kendisi için not yazabilir.
kendisi için yazabileceği gibi birden fazla kişi aynı iş için çalıştığında
birbirlerine belirtmek istediklerini direk yerinde belirtme şansını elde ederler.
-->

&nbsp; &nbsp; &nbsp; &nbsp; <b>ADANA :</b><br>
&nbsp; &nbsp; &nbsp; &nbsp; <b>ADIYAMAN :</b><br>
&nbsp; &nbsp; &nbsp; &nbsp; <b>AĞRI:</b><br>


Yukarıdaki html kodu internet tarayıcısında gördüğümüzde. Yerel Gazeteler: yazısından sonra ADANA: yazısını görürüz.

HTML kodunda gördüğünüz 4 satırlık açıklama yazısı gözükmez:
<!--    Açıklama satırları buraya yazılır ;  -->
Yukarıdaki HTML kodunun internet tarayıcısında oluşturduğu görüntü aşağıdaki gibidir.



<A> HTML etiketinin href ten başka target ve title özellikleri vardır:
1) href = ile tıklanıldığında gidilecek sitenin adresi belirtilir. (Adres ingilizce olarak URL dir.)
2) target = ile tıklanıldığında ayrı bir sayfa da açılıp açılmayacağını belirtiriz.
target="_blank" değerini verirsek tıklanıldığında link ayrı bir pencere de açılır.
3) title = özelliğiyle linkin üzerine (maouse) ile gelindiğinde çıkacak açıklayıcı yazıyı belirleriz.

Title özelliği <a> etiketi gibi birçok htm etiketinde vardır:
<a> etiketi gibi <img> etiketi de title özelliğine sahiptir.
title ile Resmin üzerine gelindiğinde açıklayıcı bir yazı çıkması sağlanır.

Gazeteler-e linkler çalışmasında yerel gazetelere linkler verelim:
www.adanagazete.com un başına http:// eklememiz gerekiyor.
<a href="Buraya link verilecek web sitesinin adresi yazılır"> link verilecek yazı buraya yazılır. </a>


&nbsp; &nbsp; &nbsp; &nbsp; <b>ADANA :</b>
<a href="http://www.adanagazete.com/" target="_blank" title="Adana Gazete">Adana Gazete</a> |
<br>
        <b>ADIYAMAN :</b>
<a href="http://www.adiyamanhaber.com/" target="_blank" title="Adıyaman Haber - Adıyaman">Adıyaman Haber</a> |
<a href="http://www.cagdasgolbasi.org/" target="_blank" title="Çağdaş Gölbaşı - Adıyaman">Çağdaş Gölbaşı</a> |


Yukarıdaki HTML kodunda şuna dikkat edin ADANA: dan sonra kodlamaya yeni bir satırdan devam etsek bile verdiğimiz link hemen ADANA: dan sonra gösterilir. HTML görüntülenirken tıpkı boşlukların ihmal edildiği gibi alt satıra yazmamız da ihmal edilir. <br> etiketini kullansaydık ADANA: dan sonraki link aşağı satırda görünecekti.

linke tıklandığında açılacak pencerenin yeni bir pencerede açılması için yapılması gerekeni unutmayın:
<a target="_blank" şeklinde olması gerekir. href özelliği target tan önce de yazılabilir sonra da.

HTML derslerine katıldığınız için teşekkür ederim. sonraki derste inşaAllah buluşmak üzere. Selametle kalın

ödevleriniz:
1) web sitelerini gezerken kaynağı görüntüle deyip gördüğümüz etiketleri incelemeye çalışın
2) kendinize linklerin olacağı herhangi bir konu seçin gazeteler-e linkler gibi sizde link sitesi için bir konu seçin.

9. HTML Dersi
Tablo etiketine giriş (<table> .... </table>) (HTML Table)

Herkese merhaba!
Bu dersimiz biraz geçikti. Kusura bakmayın. Nedeni:
Çalıştığım yerden, yıllık izin aldım ve bebeklerimiz ve abileriyle ben tek başıma bir süre kalmayı seçtim.
Bu ara verme işi bir miktar beni olaydan uzaklaştırdı daha sonraki hafta ise bu soğukluk nedeniyle bir türlü dersi hazırlayamadım.

Size tavsiyem; bir işe başladıktan sonra ara vermeyin, kesinlikle vermeyin.
Ara vermek sizi işten soğutur. Bir daha hiç başlayamayabilirsiniz.
Hayatınızda yarım bıraktığınız bir işiniz daha olur.
Bu dersimizde sizlere html derslerinin vazgeçilmez konusu olan <table> etiketini anlatmaya niyetim var.
inşaAllah <table> etiketininin temel özelliklerini iki derste anlatacağım.

Sizler biliyorsunuz ki html de başlayan bir tag  kapanmak zorundadır.
Birkaç istisna HTML etiketi (tagı) vardır ki bunların kapanmasına gerek yotur.
<table> şeklinde açılan tablo etkieti </table> şeklinde kapatılması gerekir.

Şunu lütfen hatırlayın: İki farklı HTML etiketi açıldığında sonraki açılan kapanmadan 1. açılan etiket kapatılmaz.
Bu kurala uyulmadığında html etiketileri içiçe olmamış olur.
İçiçe olmayıp etiketler birbirlerini keserlerse yanlış yapmış oluruz.
Şuna her zaman dikkat edin: sonra açılan etiket önce kapatılır.

Bildiğiniz gibi tablo satır ve sutunlardan oluşur.
Tablo 3 satır 4 sutundan oluşuyorsa 3 çarpı 4 eşittir 12 hücreye sahip olur.
Tablo 1 satır 2 sutundan oluşuyorsa toplam 2 hücresi olur.
Tablo 2 satır 3 sutundan oluşuyorsa kaç hücresi olur peki?

1. satırın 1. hücresi  1. satırın 2. hücresi  1. satırın 3. hücresi 
2. satırın 1. hücresi  2. satırın 2. hücresi   2. satırın 3. hücresi 

Yukarıda gördüğünüz gibi 2 satırlı ve 3 sutunlu bir tablonun 6 hücresi olmaktadır.
Tablo da satırın başladığını <tr> alt etiketiyle belirtiriz.
Tahmin ettiğiniz gibi tablonun satır bitişi </tr> ile belirtilir.



Sizinle önceki derslerimizde img etiketinin border özelliğini gördük diye hatırlıyorum.
Html etiketlerinin özelliklerini > den hemen önce belirtebiliriz.
<table border =1>
Bazı özellikler birçok html etiketinde geçerlidir. Örneğin border, height, width, color ....
Etiketlerin özellikleri yazılırken eşittir işaretinden sonra aldıkları değer belirtilir.
burada border özelliği 1 değerini almış.

Yukarıda resimde gösterdiğim htm kodunu elle yazıp çalıştırmanızı istiyorum.
<table border=1> şeklinde belirtirseniz tablonun çerçevelerini görürsünüz.
öbür türlü tablo davranışı elde etmiş olursunuz. Ama tablo görüntüsü olmaz.
Tablo davranışından kastım belli yazıları ekranın belli yerine yazdırmaktır.

Aşağıya bakarsanız tablo davranışı ifadesiyle neyi kasdettiğimi daha iyi anlayacaksınız.
1. satırın 1. hücresi  1. satırın 2. hücresi  1. satırın 3. hücresi 
2. satırın 1. hücresi  2. satırın 2. hücresi   2. satırın 3. hücresi 

Tablo dersimize bir dahaki hafta devam etme dileğiyle...
Ödeviniz
a) 3 satır 4 sutunlu bir tablo yapmak
b) 4 satır 1 sutunlu bir tablo yapmak
c) 1 satır 1 sutunlu bir tablo yapmak
d) 1 sutun 4 satırlı bir tablo yapmak

Bir dahaki dersimiz şunları işleyeceğiz inşaAllah.
tabloya ve hücrelere renk vermek
tablo ve hücrelere yükseklik ve genişlik vermek.

Dersimize katıldığınız için teşekkür ederim.
Sabır ile çalışmaya devam etmeniz dileğiyle

10. HTML Dersi
Tablo konusuna devam ... (HTML Table 2)

Merhaba,
Hemen derse geçebilir miyiz? Cevabınızın evet olduğunu duyar gibiyim
Bir önceki dersimizde Tablo konusuna başlamıştık.

Hatırlatma (iki hücreli tek satırlı tablo kodu):
<table>   <tr>     <td></td>     <td></td>     </tr>  </table>

Daha önceki derslerimizde şu özellikleri görmüştük. (HTML etiketi değil özelliklerini gördük)
align
height
width
bgcolor
border
Html etiketlerinin çeşitli özellikleri vardır bu özelliklerden bazıları yukarıdaki gibidir.

Html etiketi ayrı şeydir html etiketinin özelliği ayrı şeydir.
HTML etiketleriyle , etiketlerin özellikleri arasındaki farklar şunlardır.
html etiketleri < > bu iki işaret arasında olur html etiketinin özellikleri de aynı şekilde < > işaretleri arasında olur. Fakat < den hemen sonraki kelime html etiketidir.
< den sonraki kelimenin sonrasında birşeyler varsa onlar da etiketin özellikleridir.
özellik="değeri" şeklinde yazılır ve her özellikle html etiketi arasında MUTLAKA boşluk olmalıdır.

table - tr - td etiketleri de align (hizalama), height (yükseklik), width (genişlik), bgcolor (zemin rengi), border (çerçeve) özelliklerini alabilirler.

Tek hücreli bir tablo yapalım.
HTML KoduOluşan Görüntüsü
<table border=4>
    <tr>
          <td> &nbsp; </td>
          <td> &nbsp; </td>
    </tr>
</table>
   


Burada iki hücrenin içinde de &nbsp; kullanıldı bunun nedeni nedir sizce?
border=4 değerini arttırırsanız şöyle bir görüntü elde edersiniz.
   
border=10 yapılmış hali yukarıdaki gibidir.
Burada hangi alanın büyüdüğüne dikkat ediniz.
tabloya width (genişlik) özelliği ekleyip width=200 yapalım.

HTML KoduOluşan Görüntüsü
<table border=10 width=200>
    <tr>
          <td> &nbsp; </td>
          <td> &nbsp; </td>
    </tr>
</table>
   


Tablonun boyu 200 piksel oldu (pikselin ne olduğunu ileriki zamanlarda açıklayalım inşaAllah)
fakat siz pikselin bir uzunluk ölçüsü birimi olduğunu bilmeniz gerekir.
yukarıdaki iki hücresi olan (<td>   </td>        <td>   </td>) tabloya genişlik değeri olarak 200 piksel verdik.
Fakat dikkat ederseniz yüksekliğini belirtmediğimiz halde hücrelerin yaklaşık 30 piksel kadar yüksekliği var.
Yukarıda size hücrelerin içine neden &nbsp; yazdığımızı sormuştum.

Herhangi bir yazı yazdığımızda hücreye geçerli olan yazı puntosu (büyüklüğü) kadar yükseklik verilir.
Hücrelerin içi boş olduğu için yükseklik verilemeyeceği için &nbsp; değerini yazmıştık.
Bizim gözümüz orayı boş görse bile &nbsp; olduğu için tarayıcı orayı dolu kabul eder ve oraya geçerli yazı büyüklüğü kadar yükseklik verir.

Tabloya şimdi de 200 genişlikle birlikte 100 piksel de yükseklik verelim.
HTML KoduOluşan Görüntüsü
<table border=10 height=100 width=200>
    <tr>
          <td> &nbsp; </td>
          <td> &nbsp; </td>
    </tr>
</table>
   


Şimdi hücrelerin içine birşeyler yazalım ve zemin rengi verelim.
İstersek tabloya zemin rengi verebileceğimiz gibi hücrelere ayrı ayrı da zemin rengi verebiliriz.
Tabloya zemin rengi verirsek bütün hücrelerin zemin rengini bir seferde vermiş oluruz.

Birinci hücrenin içine web dersleri yazıyoruz.
HTML KoduOluşan Görüntüsü
<table border=1 height=100 width=200>
    <tr>
          <td> Web dersleri </td>
          <td> &nbsp; </td>
    </tr>
</table>
Web dersleri  

Dikkat ederseniz tablonun genişlik değeri olan 200 piksel iki hücre arasında dağıtılırken eşit dağıtılmadı ama adaletli dağıtım oldu.
Adaletli dağıtım diyorum çünkü 1. hücremizin ihtiyacı fazla ama ikinci hücrenin ihtiyacı az.

Şimdi align özelliğini kullanalım.
align özelliğinin alabildiği değerleri hatırlayalım : right (sağ) - left (sol) - center (ortalı)

<td align=center> web dersleri </td> şeklinde olduğunda (ORTALI)
Web dersleri  

<td align=right> web dersleri </td> şeklinde olduğunda (SAĞA HİZALI)
Web dersleri  

Dikkat ederseniz web dersleri ifadesini ilk yazdığımızda sola hizalı gösterildi (web tarayıcısı tarafından).
Biz align=left demediğimiz halde (align konusunda hiçbirşey belirtmediğimiz halde sola hizalı yazıldı).
Eğer buna rağmen align=left diye hizalama belirtirsek nedenimiz şu olabilir;
Bazı web sayfası tarayıcılarının geçerli değeri (hiçbir hizalama belirtilmediği durumunda) hizalamaları değişik olabilir.

Biz webmasterlar web sitesi yaptığımızda bir tek tarayıcı için yapmamalıyız.
Birçok tarayıcıyı dikkate alarak web sayfası yaparsak daha başarılı bir sonuç elde etmiş oluruz.

bgcolor özelliğine de değindikten sonra bu dersimizi bitirelim inşaAllah.
HTML KoduOluşan Görüntüsü
<table width=300 border=1>
    <tr>
          <td bgcolor="yellow"> Web dersleri </td>
          <td> &nbsp; </td>
    </tr>
</table>
Web dersleri  


Bir dahaki dersimizde tablo konusuna devam edeceğiz inşaAllah
Size verebileceğim ödevler şunlar:
align | height | width | bgcolor | border özelliklerine çeşitli değerler vererek aşağıdaki tablo tiplerini çalışınız.
a) 3 satır 4 sutunlu bir tablo
b) 4 satır 1 sutunlu bir tablo
c) 1 satır 1 sutunlu bir tablo
d) 1 sutun 4 satırlı bir tablo


Bir dahaki dersimizde buluşmak dileğiyle hoşça kalın.

11. HTML Dersi
Resim editörü Picasa - kurulumu (Pikasa - Resim Editörü)

Yeni bir HTML dersinde daha sizi görmek güzel
Bu dersimizde hayvan resimleri konusunda yapacağım siteye sizinle başlamayı uygun gördüm.
Hayvan resimlerini bir arkadaşımdan rica ettim 71 grup hayvandan 20 şer kadar resim topladı.
Biz bu derste köpek resimleri kısmını birlikte yapacağız.
Siz de herhangi bir konuda resim toplayıp ufak bir site yapmaya başlayabilirsiniz.
Öncelikli olarak aşağıdaki linkten resimleri küçültmek için kullanacağımız programı (resim programını indiriniz).   (google resim editörünü indirmek için yandaki linke tıklayınız)
Haydin picasa 'yı bilgisayarınıza kuralım.
İndirdiğiniz programı (picasa kurulum programını) çalıştırdığınızda aşağıdaki ekran gelecektir.

Kabul Et butonuna tıklayınız. Bir sonraki ekran aşağıdaki gibi olacaktır.


Picasa'nın kurulacağı yeri önerildiği gibi bırakın ve kur butonuna tıklayınız.


Kurulumu tamamladıktan sonra (Bitir butonuna tıklandıktan sonra) Picasa otomatik olarak çalışacaktır.
İlk kez çalıştığında bilgisayarınızda ne kadar resim dosyası varsa hepsini araştırıp bulur.
O araştırıp bulurken bekleyebilirsiniz.
Bu araştırmayı daha sonraki açılışlarda yapmaz; ilk yaptığı araştırmadaki bilgiyi kullanır.

Kurduğumuz picasa programını resimleri küçültmek (pul resim elde etmek) için kullanacağız.
Picasa programının başkaca işlevleri de var fakat biz şimdilik resim küçültmek için kullanacağız.


Yukarıdaki resimde ben köpek resimlerinin olduğu klasöre odaklandım ve :
Eylemler butununa tıklayıp gördüğünüz menünün gelmesini sağladım.
Menüden "Tüm resimleri Seç" i tıklayıp kopek klasöründeki bütün resimleri seçtim.


Dışa Aktar butonuna (sağ alt tarafta) tıkladığınızda Klasöre "Aktar ekranı" gelecektir.
Dışarıya aktarılacak klasörü değiştirebilirsiniz.
ben pul resim (küçük resim) boyutu olarak 140 pikseli seçtim.
Resim kalitesi olarak … 'i yeterli görüyorum.

"Aktarma ekranı" adındaki ekrandaki ayarları yaptıktan sonra Tamam butonuna tıkladığınızda;
Seçili bütün resimler seçtiğiniz klasöre seçtiğiniz boyutta ve kalitede kopyaları oluşturulacaktır.
Yapmayı düşündüğüm hayvan resimleri sayfasının taslağını aşağıdaki gibidir.

Resme tıklayarak 15 aşamada anlatacağım sayfanın son halini (15. aşamasını) görebilirsiniz.

15 aşamada olayı anlatmadan önce şunları vermek istiyorum:
1) <table aling=center> şeklinde kullanıldığında tablonun kendisi sayfada ortalanır.
2) aling hücre içindeki şeyleri sağa, sola veya ortaya hizalar.
3) valign ise hücre içindekilerin dikey hizalaması için kullanılır (üst, orta, alt)
4) Bazen tablonun kendisini (tablo görüntüsünü) değil tablo davranışı elde etmek isteriz ve border=0 yaparız.
5) <hr> yatayda bir çizgi elde etmek için kullanılır. diğer bazı etiketler gibi bgcolor ve width özelliği alır.
6) <tr align=center> şeklinde kullanıldığında ilgili tr içindeki bütün hücrelerin (<td></td>) içindekiler ortalanır.

15 aşamada hazırlayacağımız hayvan resimleri sayfasının son halini görmek için buraya tıklayınız.

Ödev:
Yukarıdaki linke tıkladığınızda açılan sayfadayken
1) boş bir yere sağ tıklayın.
2) çıkan menüden kaynağı görüntüle (view source) 'u seçip
3) açılan kod pencersindeki kodu inceleyiniz.
Eğer yukarıdaki gibi yapmak size karışık geldiyse buraya tıklayarak ta ilgili kodu görebilirsiniz.

13. HTML Dersi
Table html etiketinin Rowspan ve Colspan özellikleri (Rowspan ve Colspan)

html derslerimizin en fazla zaman alan konusu tablo konusu oldu.
Henüz tablo konusunu kapatmak istemiyorum. Şimdiki dersimizde de tablo konusunu görelim. İnşaAllah bu dersimizden sonra başka bir konuya geçebiliriz.

Tablo konusunda hatırlatmalarda bulunarak bu dersimize başlasak uygun olur sanırım.

1) içiçe 3 etiket yazarak tablo elde edebiliyoruz.
2) en dış etiket <table> </table> etiketidir.
3) en iç etiket ise hücrenin kendisini tanımlayan <td> </td> etiketidir.
4) <tr> </tr> etiketi satırları ifade eder.
5) önceki derslerimizde de söylediğimiz şey hangi etiket en son açıldaysa ilk önce o kapatılır.
6) bgcolor özelliği her 3 etikete de uygulanabilir.
7) bgcolor gibi her üç etikete de uygulanabilecek özellikler bazıları şunlardır;
    height
    width
    align
Aşağıdaki 3 hücreli tek satırlı tabloda her hücrenin içini yeşile boyayalım.
HTML KoduOluşan Görüntüsü
<table border=1>
   <tr>
     <td bgcolor="green"> Yeşil </td>
     <td bgcolor="green"> Yeşil </td>
     <td bgcolor="green"> Yeşil </td>
   </tr>
</table>
Yeşil Yeşil Yeşil


Aynı sonucu şu şekilde de elde edebiliriz.
HTML KoduOluşan Görüntüsü
<table border=1>
   <tr bgcolor="green">
     <td> Yeşil </td>
     <td> Yeşil </td>
     <td> Yeşil </td>
   </tr>
</table>
Yeşil Yeşil Yeşil


Burada çıkan sonuç şudur eğer bir satıra aynı rengi vereceksek gidip tek tek hücrelere bgcolor atamak gereksizdir.
Bunun yerine satırı ifade eden <tr> ye bgcolor özelliği vermemiz daha da yerinde olur.
bu renk değil de başka bir özellikte olabilirdi olabilirdi.
örneğin yükseklik satırdaki bütün hücreler için aynı olacağından dolayı yükseklik özelliklerini tr ye belirtmeniz yerinde olacaktır.

Eğer tümden tablonuza aynı rengi verecekseniz bu durumda table etiketine bgcolor belirtmeniz daha yerinde bir kodlama olacaktır.
Farklı olmasını istediğimiz satırın rengini bgcolor ile değiştirebilirsiniz.
Aşağıda farklı renk vermek istediğimiz hücrenin (<td>) bgcolor özelliğine yellow değerini verdik.
HTML KoduOluşan Görüntüsü
<table border=1 bgcolor="green">
   <tr>
     <td> Yeşil </td>
     <td> Yeşil </td>
     <td> Yeşil </td>
   </tr>
   <tr">
     <td> Yeşil </td>
     <td bgcolor="yellow"> Sarı </td>
     <td> Yeşil </td>
   </tr>
   <tr>
     <td> Yeşil </td>
     <td> Yeşil </td>
     <td> Yeşil </td>
   </tr>
</table>
Yeşil Yeşil Yeşil
Yeşil Sarı Yeşil
Yeşil Yeşil Yeşil


şimdi size colspan ve rowspan 'ı da anlatıp bu dersimizi bitirmek istiyorum.
Nedir rowspan?
row satırı ifade eder; rowspan ise satırların birleştirilmesidir.
Çalıştığı Departman Çalışanın adı ve soyadı Çalışanın doğum yılı
Muhasebeciler Hacer Havuz 1963
Murat Musluk 1975
Mustafa Muşlu 1984
Satış elemanları Seçil Sever 1968
Burak Burma 1944
Mert Metelik 1980
Normalde tablo bir ızgara gibidir. Fakat bazen ızgara gibi bir yapı işimizi görmez.
Izgara derken her sütun ve satırda aynı sayıda hücrenin olmasını kasdettim.
2. ve 3. sutunda 6 satır varken; birinci sutunda sadece 2 satır vardır.
rowspan=3 ifadesiyle ilgili sütunda iki satır olmasını sağladık.

Yukarıdaki görüntüyü veren HTML kodunu lütfen üzerinde düşünerek + dikkatlice inceleyip + kendinizde de çalıştırınız.
<TABLE BORDER=2>
    <TR bgcolor=yellow>
            <TD>Çalıştığı Departman </TD>
            <TD>Çalışanın adı ve soyadı </TD> <TD>Çalışanın doğum yılı</TD>
            </TR>
    <TR>

    <TR>
            <TD ROWSPAN=3 BGCOLOR="#99CCFF">Muhasebeciler</TD>
            <TD>Hacer Havuz</TD> <TD>1963</TD>
    </TR>
    <TR>
            <TD>Murat Musluk</TD> <TD>1975</TD>
    </TR>
    <TR>
            <TD>Mustafa Muşlu</TD> <TD>1984</TD>
    </TR>
    <TR>
            <TD ROWSPAN=3 BGCOLOR="#99CCFF">Satış elemanları</TD>
            <TD>Seçil Sever</TD> <TD>1968</TD>
    </TR>
    <TR>
            <TD>Burak Burma</TD> <TD>1944</TD>
    </TR>
    <TR>
            <TD>Mert Metelik</TD> <TD>1980</TD>
    </TR>
</TABLE>


Nedir colspan?
Col ingilizce column ifadesinden bir kısaltmadır. Column sütun anlamına gelir.
colspan ise Sütunları birleştirmek için kullanılır.

Aşağıdaki kodu inceleyip ekranda nasıl bir görüntü oluşturacağını tahmin etmeye çalışınız.
<TABLE BORDER=2>
<TR>
            <td COLSPAN=2 bgcolor="#99CCFF">2005 YILINDA İŞE BAŞLAYANLAR</td>
</TR>
<TR>
            <td>Sezai Serin</td>
            <td>Şubat ayında</td>
</TR>
<TR>
            <td>Melek Mert</td>
            <td>Nisanda</td>
</TR>

<TR>
            <td>Muhammed</td>
            <td>Haziran</td>
</TR>
<TR>
            <td COLSPAN=2 bgcolor="#99CCFF">2006 Yılında işe başlayanlar</td>
</TR>
<TR>
            <td>Cömert Cenk</td>
            <td>Kasım</td>
</TR>
<TR>
            <td>Ece Ercüment</td>
            <td>Aralık</td>
</TR>
<TR>
            <td>Zeynep Zengin</td>
            <td>Haziran</td>
</TR>
</TABLE>



Yukarıdaki HTML kodunun oluşturduğu görüntü aşağıdaki gibidir.
2005 YILINDA İŞE BAŞLAYANLAR
Sezai Serin Şubat ayında
Melek Mert Nisanda
Muhammed Haziran
2006 Yılında işe başlayanlar
Cömert Cenk Kasım
Ece Ercüment Aralık
Zeynep Zengin Haziran


colspan=2 ile bu tablodaki bazı satırlar tek sütunlu yapılmıştır.
Normalde sekiz satır iki sütunlu olan bu tablonun 1. ve 5. satırları tek sütunlu yapılmıştır.
Dikkat ederseniz colspan=2 ifadesinin kullanıldığı <tr> lerde bir tane <td> etiketi kullanılmıştır.
Bu dersimizin de sonuna geldik.
İnşaAllah bir dahaki dersimizde buluşmak üzere diyorum.




A--Hiper bağ oluşturmak için kullanılır
ADDRESS--Mail Adresi tanımlar
AREA--Resimlerin haritası çıkalırlır
B--Yazıyı koyu yapar
BASE--özel döküman adresi
BASEFONT--Font değeri ayarlama
BGSOUND--Sayfaya ses ekleme için kullanılır
BIG--Font büyüklüğünü artırma
BLOCKQUOTE--Yazıyı belli miktarda sağda yazdırır
BODY--Çeşitli etiketlerle kullanılır desen etiket v.s için
BR--Satır sonu belirtmek için kullanılır.
CENTER--Yazıyı ortalamak için kullanılır.
CITE--alıntı yapılan siteyi belirtir.
CODE--Yazıyı genişleterek ilginç bir şekil verir.
COMMENT--Sayfa içinde açıklama yapma.
DD--Değişik listelendirme yapar.
DFN--İtalik yazıya dönüştürür.
DL--Listelendirme.
DT--Listelendirme.
FONT--Font tipini düzenleme.
FORM--Bilgi alışverişi için form oluşturur.
FRAME--Sayfada frame oluşturmak için kullanılır.
FRAMESET--Frame oluşturmada kullanılan komut.
Hn--Başlıkları oluşturmada kullanılır.
HEAD--Dökümanın tanımlama bölümü burada tanımlanır.
HR--Yatay çizgi çizmek için kullanılır.
HTML--Döküman başlangıcını ve sonunu belirtmek için kullanılır.
i--İtalik yazı yapar.
IMG--Sayfaya resim eklemek için kullanılır.
INPUT--Formlarda bilgi girişini gösterir.
ISINDEX--Arama için bölüm oluşturur.
KBD--Yazı boyutunu genişletir.
LISTING--Yazıyı çok küçük hale getirir.
MAP--Resimlerin haritasını çıkarmada kullanılır.
MARQUEE--Kayan yazı.
MENU--Listeyi belli oranda sağda görüntüler.
NOFRAMES--Frameleri desteklemeyen browserler için.
OPTION--Diyalog kutusu içinde seçim yapmayı sağlar.
P--Paragraf sonu belirtmek için kullanılır.
PLAINTEXT--Bu tagdan sonra yazılan herşey web sayfasında görünür.
PRE--Yazıyı boşluklu ve aralıklı yazdırır.
S--Yazıyı ortadan çizer.
SAMP--Özel yazı kodu ile yazar.
SELECT--Menu seçimi sağlar.
SMALL--Çok Küçük yazı yazar.
STRIKE--Koyu yazı yazdırır.
TABLE--Tablo oluşturmak için kullanılır.
TEXTAREA--Küçük alanlara daha çok yazı yazmayı sağlayan text alanı.
TİTLE---Dökümanın başlığını ifade eder.
TT--Değişik yazı.
U--Altı çizgili yazı
button--buton eklemek.
area--resim üzerinde alan belirtmek.
b--kalın yazmak.
abbr--kısaltma.
a--bağlantı verme.
!DOCTYPE--dosya türünü yazmak.
!--...--/--noktalı yerlere açıklama eklemek.
acronym--kısaltmayı açıklamak.
base--tüm bağlantılar içn ana yolu belirtme.
bdo--yazı yönünü bildirme.
big--büyük yazm.
blockguote--alıntı yapmak.
body--içeriğe başlangıcı bildirmek.
br--satır atlamak.
caption--tablo başlığı belirtmek.
center--yazıyı yada hizayı ortala.
code--bilgisayar kodu şeklinde yazmak.
col--tablo sütununu belirtmek.
colgruop--tablo sütun guruplarını belirtmek.
dd--açıklama eklemek.
del--üstü çizili yazı yazmak.
div--dosyada alan belirtmek.
dfn--bir terim açıklamak.
dl--terimler listesi.
dt--terim açıklamak.
em--vurgulu yazı.
fieldset--alan belirleme.
form--form kullanma.
frame--alt pencere açmak (frame)
frameset--alt pencereleri tanımlamaya başlamak.
h1 to h6--başlık (1-6)arası.
head--dosya bilgilerini açıklama bölümü.
hr--yatay çizgi çekmek.
html--html'ye başlamak.
img--resim eklemek.
input--form nesnesi eklemek.
ins--vurgu yapmak.
kbd--kelime yazdırma.
label--etiket belirleme.
legend--bir alan için başlık belirleme.
li--listeleme.
link--dosyaya yada herhangi birşeye bağlantı vermek.
map--resim tanımlama.
meta--dosya bilgisi tanımlama.
noscript--script desteği yoksa yapılacaklar.
object--bir obje belirlemek. (flash v.s)
ol--numaralandırılmış liste ekleme.
--seçim gurubu.
option--sürükle bırak seçim listesi.
p--paragraf.
param--parametre bildirme.
pre--formatlı yazı ekleme.
g--küçük alıntılar için.
samp--bilgisayar yazı tipi kullanma.
script--script tanımlama.
select--seçim kutusu tanımlama.
small--küçük yazma.
span--bir alan tanımlaması.
strong--vurgu yapmak.
style--stil belirleme.
sub--normalden aşağı yazı.
sup--üst yazmak.
table--tabloya başlamak.
tbody--tablo başlangıcı.
td--sütun belirleme.
textarea--metin kutusu.
tfoot--tablo altlığı. th--tablo başlığı.
thead--tablo başlangıcı.
tr--satır belirleme.
ul--madde işaretli liste.
var--değer.
xmp--pre komutunun aynısı.
not:kodları yazarken küçük harf fontunda yazınız.Türkçe karakter kullanmayın. (HTML kod arşivinden alımıştır.Hazırlayan arkadaşa teşekkür ederiz)
  • Ana Sayfaya Dön





  • Bu sayfa hakkında yorum ekle:
    İsminiz:
    E-mail adresiniz:
    Mesajın:

    Bugün 28 ziyaretçi (52 klik) kişi burdaydı!
     
       
    Facebook beğen  
       
    Reklam  
       
     
     


    PROGRAM ARA
    PROGRAM ARA

     
     
     

    SiteEkle.Com.Tr


     
     
     
    Üye Girişi

     
     
     
  • windows live messenger çalışmayı durdurdu uyarısı
  • laptop batarya ömrü nasıl uzatılır
  • soru kablosuz internet çalışmıyor
  • kullanıcı hesabı denetimini kapatmak
  • ana sayfam değişti neyapmalıyım
  • dosya uzantılarını çalıştıracak programlar
  • windows gezgini çalışmayı durdurdu
  • bilgisayar geç açılıyor
  • rar uzantılı dosyalar nasıl açılır
  • windows kısayol tuşları
  • ms-dos komutları-1-
  • ms-dos komutları-2-
  • ms-dos komutları-3-
  • ekran görüntüsü nasıl alınır kaydedilir
  • veri yürütme engellemesi
  • virüs nedir nasıl bulaşır
  • java nedir ne işe yarar
  • anakart pilini değiştirmek
  • port nedir
  • tcp ıp kodları
  • ethernet kartı nedir
  • ftp server kurulumu
  • işlemci kullanımı
  • Google AdSense Nedir
  • E-İMZA Nedir
  • JavaScript Nedir
  • Arama Motoru Nedir
  • XML Nedir
  • Java Nedir
  • World Wide Web (WWW)Nedir
  • ICQ Nedir
  • MMS Nedir
  • Splitter Nedir
  • ISDN Nedir
  • CGI Nedir
  • Alan Adı Nedir
  • Bookmark Nedir
  • DSL İle ADSL Nedir Farkları Nelerdir
  • Java Özellikleri Ve Avantajları Nedir
  • IRC & CHAT Nedir
  • E-Posta Nedir
  • ADSL Nasıl Çalışır
  • SMS Nedir
  • Wireless Network Nedir
  • CRM Nedir
  • ERP-MRP-II İlişkisi
  • ERP -E-Business İlişkisi
  • ERP Ve KOBİler
  • Ekran Kartı Nedir

  • isim
     

    Zirve100 Toplist
    http://ozgurcebilgiedin.tr.gg/: