07-03-2011, 18:38
(En son düzenleme: 07-03-2011, 18:39 kod_adı_pars.)
1. Ders - 1. Konu
KoLay ve Bir o Kadar da ÖnemLi oLan HtmL'ye Giriş
Sizlere burada kısaca HtmL'den bahsedeceğim.
Bu derslerimizden sonra, dreamweaver programında pekiştireceğiz öğrendiklerimizi. Dreamweaver programını en sona bırakmamın sebebi, program bütün bu yaptıklarımızı otomatik olarak kendisi yapıyor ancak, yaptığınız siteleri eğer ki dizayn modunda yaparsanız, html'yi öğrenemezsiniz sadece programı kavrarsınız. Benim amacım temelden alıp, nerde ne kullanacağınızı göstermek !..
!! Hypertext Markup Language !!
HackHeLL Sınırlarında olduğunuza göre, internette dolaşan birer kullanıcısınız. İnternette gördüğünüz o harika sitelerin nerden geldiğine bir bakalım. O gördüğünüz tasarım harikası sitelerin tabanında "html" yatıyor.
Çok kolay ve bir o kadar da önemli bir konu demiştim sizlere =)
Kısaca bir giriş yapalım artık Html konumuza.
* Html 'de yazacağımız kodlara, "TAG" adını veriyoruz. Yazdığımız kodlar;
<> ile başlayıp, </> ile biter. Ne demek istediğimi örneklere baktığınız zaman anlayacaksınız.
Kodlarımızı yazmaya başlamadan önce, Resimde ki gördüklerinizi uygulamanız. Bunun bize faydası, her seferinde yaptığımızı farklı kaydetmek yerine, tek bir dosya üzerinde kolayca kayıt yaparak, derslerimize devam edeceğiz.
Öncelikle uygun bir yere "Html Çalışmaları" adında bir klasör oluşturunuz !..
Oluşturduğumuz klasörün içerisine girin ve bir metin belgesi oluşturun. İsmi "index.html" olacak biçimde
Oluşturduğumuz metin belgesinin içerisine girip, Dosya-Farklı Kaydet seçeneklerine tıklayınız.
Kaydedeceğiniz konumu, "Html Çalışmaları" klasörü olarak seçiniz ve resimde gördüğünüz ayarlamaları yapınız
Bütün açılan pencerelerimizi kapatalım ve "Html Çalışmaları" isimli klasörümüzün içine girelim. Gördüğünüz gibi aynı isimde 2 tane dosya oluştu.
1. Dosya = Txt Dosyamız
2. Dosya = Html Dosyamız
Bu tür çalışmanın bize sağlayacağı yararı bir kez daha söylemek istiyorum.
Düzenli bir çalışma ortamı ve işlem kolaylığı sağlayacak.
Txt Dosyamızda yazdıklarımızı kaydet tuşuna bastıktan sonra html dosyamızda görebileceğiz !..
1. Ders - 2. Konu
Browser Başlığı Eklemek
Bir web sitesi yazımına başlayacağız ve ilk başta browser başlığını değiştirmekle uğraşacağız !..
Arkadaşlar ;
Html kodlamamıza başlarken bilmeniz gerekenler,
Kod:
<html> .............. </html>
Yukarda vermiş olduğum 2 tag arasına yazılır herşey. Bu Taglar bizim başlangıç ve bitiş taglarımızdır.
Kod:
<html> ......... </html>
Taglarının hemen ardından
Kod:
<head> ......... </head>
taglarımızı yazacağız. Bu taglar arasına yazdığımız kodlar, sayfanın teknik kısmıdır yani site içerisinde gözükmez fakat
sitemizin yapımında gerekli olan kodlara sahiptir.
Biz bu konumuzda
Kod:
<title>.......</title>
tagından yardım alacağız.
<title> taglarının arasına yazdığımız yazı, bizim browserimizin başlığı olacaktır.
"Html Çalışmaları" isimli klasörümüzü açıp, ordan not defterimizi açıyoruz ve içerisine aşağıda vermiş olduğum kodları yazıyoruz.
*Arkadaşlar, eğer öğrenmek istiyorsanız, c-p yapmayınız, kendiniz görerek öğrenin ki kodlara aşina olabilesiniz.
Kod:
<html><head><title>seslidünyalılar' Merhaba</title></head></html>
Yukarda vermiş olduğum kodları, şekilde ki gibi yazıyoruz not defterimize.
Yazdıktan Sonra, Ctrl+S yada Dosya-Kaydet seçeneklerine gelerek, yazdığımızı kayıt ediyoruz.
Daha sonra aynı klasör içerisinde oluşturduğumuz "index.html" dosyamızı açıyoruz ve browser başlığına bakıyoruz. Bir değişiklik gördünüz değil mi =)
1. Ders - 3. Konu
Sayfayı Türkçeleştirmek
Evet web sitemizin yapımına başladık fakat sayfamızın türkçe olması gerekiyor, türkçe karakterler kullanabilmemiz için.
Sadece küçük bir tag ile bu sorunu çok kolay bir şekilde çözeceğiz !..
Kod:
<head> ......... </head>
taglarının ilk başta, teknik kodları bulunduran birim olarak söylemiştim.
Sayfamızı Türkçeleştirirken, Türkçeleştirme taglarını <head> tagları arasında yazmamız gerekiyor, teknik servis olduğu için !..
Tekrar not defterimizi açıyoruz ve içerisine aşağıda yazdığım kodları yazıyoruz.
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>Artık Sayfamız Türkçe</title></head></html>
Yukarda ki resimde ki gibi <head> elemanlarından (sayfayı türkçeleştirmek) tagımızı gereken yere koyduk ve şimdi metin belgemizi kaydedip çıkıyoruz. Html dosyamızı açtığımızda karşımıza hiçbir yazı gelmior <head> tagı arasına yazdığımız için fakat şunu unutmayalım SAYFAMIZ ARTIK TÜRKÇE
* Safayı Türkçeleştırme Kodu [ Lütfen Ya Not Ediniz yada Bilgisayarınıza kopyalayınız bu kodu. Hatta elinizde imkan varsa, ezberleyiniz !..
Kod:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254"
1. Ders - 4. Konu
Koyu - İtalik & Altı ÇiziLi Yazı Yazmak
Evet arkadaşlar, artık geldik sayfamızın içeriği ile ilgili konulara. Bir web sitesi hazırlayacağız, başlığını ekledik, türkçeleştirdik ve artık görünümünü ayarlamaya başlayacağız.
Yazılarımızı "Koyu - İtalik & Altı Çizili" olarak 3 şekilde yazabiliriz. Tabi ki bu 3 şeklin taglarıda birbirinden farklıdır.
Şimdi üzerinde çalışma yaptığımız text dosyamızı açıyoruz ve aşağıdaki kodları yazıyoruz !..
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>seslidünyalılar' Merhaba</title><body><B>YAZIMIZ KOYU YAZILACAK</B><I>YAZIMIZ ITALIK YAZILACAK</I><U>YAZIMIZIN ALTI CIZILI OLACAK</U><B><I>YAZIMIZ HEM KOYU HEM ITALIK OLACAK</I></B></body></head></html>
Gördüğünüz gibi arkadaşlar, önce türkçeleştirdik daha sonra Browser başlığımızı ekledik, Daha sonrada taglarımızın yardımıyla Yazı şekillerimizi değiştirdik.
Yukarda ki resimde bir husus dikkatinizi çekti mi bilmiyorum ama benim açıklamam gerekiyor bu hususu =) Arkadaşlar gördüğünüz gibi not defterimizde alt alta yazdık fakat, html sayfamızda bunu yan yana olarak algıladı. Not defterinde bastığımız "enter" tuşu bir nevi işlevliğini kaybetti. Yazılarımızın alt alta olmasını sağlamak amacıyla, <br> tagını kullanırız.
Bu tag aşağıya indirmek istediğimiz cümlenin başına getirilerek kullanılır. Dedikten sonra, bir sigara molası veriyoruz =)
Arkadaşlar umarım yararlı oluyordur böyle bir ders. Katılımın yüksek olması durumunda, sizlere dreamweaver - php - asp dersleri de vereceğim
1. Ders - 5. Konu
Ortalama - Sağa Hizalama - Sola Hizalama
Arkadaşlar görünümümüzde bir diğer önemli konuya geçerek bugünlük dersimizi bitirmek istiyorum.
Yazıları "ortalama - sağa yada sola hizalama" şekillerinde her birinin görevi farklı taglardan yardım alarak yapacağımız bu işlemleri.
Kod:
<center> ............ </center><right> ............ </right>
Arkadaşlar <center> ve <right> taglarımızı kullanacağız. Şimdi diyoruz ki 3 tane hizalama şekli söyledik fakat 2 tane tagımız var bu nasıl oluyor =)
Arkadaşlar sol tarafa hizalama için herhangi bir tag kullanmayacağız. Zaten normal yazdığımız zaman sol tarafa hizalı olarak gösteriyor.
Arkadaşlar aşağıda verdiğim kodları not defterinize yazıyorsunuz ve kaydedip, html dosyamızı açıyoruz ve ekranda ki değişiklikleri inceliyoruz.
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>seslidünya' Merhaba</title><body><center> Bu yazımız Ortalanmış Olarak Gözükecek </center<br><right>Bu yazımız sağa hizalanmış olarak Gözükecek</right></body></head></html>
KoLay ve Bir o Kadar da ÖnemLi oLan HtmL'ye Giriş
Sizlere burada kısaca HtmL'den bahsedeceğim.
Bu derslerimizden sonra, dreamweaver programında pekiştireceğiz öğrendiklerimizi. Dreamweaver programını en sona bırakmamın sebebi, program bütün bu yaptıklarımızı otomatik olarak kendisi yapıyor ancak, yaptığınız siteleri eğer ki dizayn modunda yaparsanız, html'yi öğrenemezsiniz sadece programı kavrarsınız. Benim amacım temelden alıp, nerde ne kullanacağınızı göstermek !..
!! Hypertext Markup Language !!
HackHeLL Sınırlarında olduğunuza göre, internette dolaşan birer kullanıcısınız. İnternette gördüğünüz o harika sitelerin nerden geldiğine bir bakalım. O gördüğünüz tasarım harikası sitelerin tabanında "html" yatıyor.
Çok kolay ve bir o kadar da önemli bir konu demiştim sizlere =)
Kısaca bir giriş yapalım artık Html konumuza.
* Html 'de yazacağımız kodlara, "TAG" adını veriyoruz. Yazdığımız kodlar;
<> ile başlayıp, </> ile biter. Ne demek istediğimi örneklere baktığınız zaman anlayacaksınız.
Kodlarımızı yazmaya başlamadan önce, Resimde ki gördüklerinizi uygulamanız. Bunun bize faydası, her seferinde yaptığımızı farklı kaydetmek yerine, tek bir dosya üzerinde kolayca kayıt yaparak, derslerimize devam edeceğiz.
Öncelikle uygun bir yere "Html Çalışmaları" adında bir klasör oluşturunuz !..
Oluşturduğumuz klasörün içerisine girin ve bir metin belgesi oluşturun. İsmi "index.html" olacak biçimde
Oluşturduğumuz metin belgesinin içerisine girip, Dosya-Farklı Kaydet seçeneklerine tıklayınız.
Kaydedeceğiniz konumu, "Html Çalışmaları" klasörü olarak seçiniz ve resimde gördüğünüz ayarlamaları yapınız
Bütün açılan pencerelerimizi kapatalım ve "Html Çalışmaları" isimli klasörümüzün içine girelim. Gördüğünüz gibi aynı isimde 2 tane dosya oluştu.
1. Dosya = Txt Dosyamız
2. Dosya = Html Dosyamız
Bu tür çalışmanın bize sağlayacağı yararı bir kez daha söylemek istiyorum.
Düzenli bir çalışma ortamı ve işlem kolaylığı sağlayacak.
Txt Dosyamızda yazdıklarımızı kaydet tuşuna bastıktan sonra html dosyamızda görebileceğiz !..
1. Ders - 2. Konu
Browser Başlığı Eklemek
Bir web sitesi yazımına başlayacağız ve ilk başta browser başlığını değiştirmekle uğraşacağız !..
Arkadaşlar ;
Html kodlamamıza başlarken bilmeniz gerekenler,
Kod:
<html> .............. </html>
Yukarda vermiş olduğum 2 tag arasına yazılır herşey. Bu Taglar bizim başlangıç ve bitiş taglarımızdır.
Kod:
<html> ......... </html>
Taglarının hemen ardından
Kod:
<head> ......... </head>
taglarımızı yazacağız. Bu taglar arasına yazdığımız kodlar, sayfanın teknik kısmıdır yani site içerisinde gözükmez fakat
sitemizin yapımında gerekli olan kodlara sahiptir.
Biz bu konumuzda
Kod:
<title>.......</title>
tagından yardım alacağız.
<title> taglarının arasına yazdığımız yazı, bizim browserimizin başlığı olacaktır.
"Html Çalışmaları" isimli klasörümüzü açıp, ordan not defterimizi açıyoruz ve içerisine aşağıda vermiş olduğum kodları yazıyoruz.
*Arkadaşlar, eğer öğrenmek istiyorsanız, c-p yapmayınız, kendiniz görerek öğrenin ki kodlara aşina olabilesiniz.
Kod:
<html><head><title>seslidünyalılar' Merhaba</title></head></html>
Yukarda vermiş olduğum kodları, şekilde ki gibi yazıyoruz not defterimize.
Yazdıktan Sonra, Ctrl+S yada Dosya-Kaydet seçeneklerine gelerek, yazdığımızı kayıt ediyoruz.
Daha sonra aynı klasör içerisinde oluşturduğumuz "index.html" dosyamızı açıyoruz ve browser başlığına bakıyoruz. Bir değişiklik gördünüz değil mi =)
1. Ders - 3. Konu
Sayfayı Türkçeleştirmek
Evet web sitemizin yapımına başladık fakat sayfamızın türkçe olması gerekiyor, türkçe karakterler kullanabilmemiz için.
Sadece küçük bir tag ile bu sorunu çok kolay bir şekilde çözeceğiz !..
Kod:
<head> ......... </head>
taglarının ilk başta, teknik kodları bulunduran birim olarak söylemiştim.
Sayfamızı Türkçeleştirirken, Türkçeleştirme taglarını <head> tagları arasında yazmamız gerekiyor, teknik servis olduğu için !..
Tekrar not defterimizi açıyoruz ve içerisine aşağıda yazdığım kodları yazıyoruz.
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>Artık Sayfamız Türkçe</title></head></html>
Yukarda ki resimde ki gibi <head> elemanlarından (sayfayı türkçeleştirmek) tagımızı gereken yere koyduk ve şimdi metin belgemizi kaydedip çıkıyoruz. Html dosyamızı açtığımızda karşımıza hiçbir yazı gelmior <head> tagı arasına yazdığımız için fakat şunu unutmayalım SAYFAMIZ ARTIK TÜRKÇE
* Safayı Türkçeleştırme Kodu [ Lütfen Ya Not Ediniz yada Bilgisayarınıza kopyalayınız bu kodu. Hatta elinizde imkan varsa, ezberleyiniz !..
Kod:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254"
1. Ders - 4. Konu
Koyu - İtalik & Altı ÇiziLi Yazı Yazmak
Evet arkadaşlar, artık geldik sayfamızın içeriği ile ilgili konulara. Bir web sitesi hazırlayacağız, başlığını ekledik, türkçeleştirdik ve artık görünümünü ayarlamaya başlayacağız.
Yazılarımızı "Koyu - İtalik & Altı Çizili" olarak 3 şekilde yazabiliriz. Tabi ki bu 3 şeklin taglarıda birbirinden farklıdır.
Şimdi üzerinde çalışma yaptığımız text dosyamızı açıyoruz ve aşağıdaki kodları yazıyoruz !..
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>seslidünyalılar' Merhaba</title><body><B>YAZIMIZ KOYU YAZILACAK</B><I>YAZIMIZ ITALIK YAZILACAK</I><U>YAZIMIZIN ALTI CIZILI OLACAK</U><B><I>YAZIMIZ HEM KOYU HEM ITALIK OLACAK</I></B></body></head></html>
Gördüğünüz gibi arkadaşlar, önce türkçeleştirdik daha sonra Browser başlığımızı ekledik, Daha sonrada taglarımızın yardımıyla Yazı şekillerimizi değiştirdik.
Yukarda ki resimde bir husus dikkatinizi çekti mi bilmiyorum ama benim açıklamam gerekiyor bu hususu =) Arkadaşlar gördüğünüz gibi not defterimizde alt alta yazdık fakat, html sayfamızda bunu yan yana olarak algıladı. Not defterinde bastığımız "enter" tuşu bir nevi işlevliğini kaybetti. Yazılarımızın alt alta olmasını sağlamak amacıyla, <br> tagını kullanırız.
Bu tag aşağıya indirmek istediğimiz cümlenin başına getirilerek kullanılır. Dedikten sonra, bir sigara molası veriyoruz =)
Arkadaşlar umarım yararlı oluyordur böyle bir ders. Katılımın yüksek olması durumunda, sizlere dreamweaver - php - asp dersleri de vereceğim
1. Ders - 5. Konu
Ortalama - Sağa Hizalama - Sola Hizalama
Arkadaşlar görünümümüzde bir diğer önemli konuya geçerek bugünlük dersimizi bitirmek istiyorum.
Yazıları "ortalama - sağa yada sola hizalama" şekillerinde her birinin görevi farklı taglardan yardım alarak yapacağımız bu işlemleri.
Kod:
<center> ............ </center><right> ............ </right>
Arkadaşlar <center> ve <right> taglarımızı kullanacağız. Şimdi diyoruz ki 3 tane hizalama şekli söyledik fakat 2 tane tagımız var bu nasıl oluyor =)
Arkadaşlar sol tarafa hizalama için herhangi bir tag kullanmayacağız. Zaten normal yazdığımız zaman sol tarafa hizalı olarak gösteriyor.
Arkadaşlar aşağıda verdiğim kodları not defterinize yazıyorsunuz ve kaydedip, html dosyamızı açıyoruz ve ekranda ki değişiklikleri inceliyoruz.
Kod:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"<title>seslidünya' Merhaba</title><body><center> Bu yazımız Ortalanmış Olarak Gözükecek </center<br><right>Bu yazımız sağa hizalanmış olarak Gözükecek</right></body></head></html>
