!! OnLine HtmL DersLeri !! # HackHeLL'e ÖzeL #

A S M E N

A S M E N

New member
Katılım
11 Şub 2007
Mesajlar
595
Reaction score
0
Puanları
0
Yaş
35
Öncelikle merhaba arkadaşlar;

Sizlere bu konu altında HtmL bilgilerimi aktaracağım.
Bol Resimli, en detayına inerek ve zevkli bir anlatım gerçekleştireceğim.
Vaktim oldukça yeni dersler ekleyeceğim ve sorularınıza bu başlık altından cevaplamalar yapacağım !..

YakLaşık 3 ayLık Bir Süre Verdim Kendime HtmL iLe ilgili dersLerin tamamlanma süresi olarak. 3 ay'ı geçmez fakat erken bitirmeye çalışacağım.
HtmL TagLarını [ Tag'ın ne demek olduğunu öğreneceksiniz ] Tamamen Öğrendikten Sonra, Dreamweaver ile HtmL BiLgiLerimizi Pekiştireceğiz ve Dreamweaver DersLeri iLe Devam Edeceğiz !..

!! İhTiyacımız oLanLar !!

* Sakin ve Kendinizi Rahat Hisseceğiniz Bir Ortam =)

* Sıcak yada Soğuk Bir İçecek =)


1. Dersimizde neLer Öğreneceğiz ?


* KoLay ve Bir o Kadar da ÖnemLi oLan HtmL'ye Giriş

* Browser BaşLığı EkLemek

* Sayfayı TürkçeLeştirmek

* Kalın, İtalik ve Altı ÇiziLi Yazı Yazmak

* Yazımızı "OrtaLama - SoLa HizaLama - Sağa HizaLama" TagLarını KuLLanmak

ArkadaşLar iLk Dersimiz Aşağıya EkLenmiştir. Sevgili ArkadaşLar 2. Dersimiz 19.02.2007 Saat: 21.00'da YayınLanacakTır !.. Lütfen Biraz Daha iLgi GöstereLim !..
Yapamadığınız YerLeri, AnLayamadığınız BöLümLeri, Bu BaşLık aLtında Sorarsanız, Yardımcı oLmaya ÇaLışacağım !..​
 

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>
HackHeLL'ciler 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>
HackHeLL'ciLer 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>
HackHeLL'ciLer 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>

Arkadaşlar bugünlük Dersimiz Bu Kadar. Katılıma ve İsteğe Göre Daha da Fazla Yoğunlaştıracağım DersLeri. BirLikte Çok EğLeneceğiz. ÖdevLer Yapıp, TestLer Çözeceğiz.
Sizden İstediğim Sadece HayaL Gücünüzü KuLLanarak Kendinize ait birşeyLer Çıkarmanız Bu AnLatımLardan FaydaLanarak !.. ;)​
 
Web tasarımdan gram anlamam:sigara:
ama bu anlatım benim iştahımı açtı:sigara:
Ortalık da birçok destan gibi dökümanlar vardı:sigara:
Bu da insanların öğreme isteğini azaltıyordu:sigara:
Bu çok iyi oldu bu açıdan,kısa ve öz:sigara:
ELine sağlık A S M E N
 
Sevgili ArkadaşLar 2. Dersimiz 19.02.2007 Saat: 21.00'da YayınLanacakTır !.. Lütfen Biraz Daha iLgi GöstereLim !..​

!! 2. Derste ÖğrenecekLerimiz !!

* Yazı StiLLeri [ Büyüklük - Renk - Style ] ===== KONU EKLENMİŞTİR !!

* Arka pLan Rengini Değiştirmek ===== KONU EKLENMİŞTİR !!

* Arka pLan'a Resim EkLemek ===== KONU EKLENMİŞTİR !!

* Herhangi Bir Yere Resim EkLemek
 
2. Ders - 1. Konu
Yazı StiLLeri [ Büyüklük - Renk - Style ]​


Evet arkadaşlar 2. dersimizin ilk konusuyla tekrar birlikteyiz. Aslında tasarımda en önemli araçlardan bir tanesidir yazı stilleri.
Yazımızın rengini, büyüklüğünü ve yazı stilini belirlemek için farklı farklı taglardan yardım alırız.
Arkadaşlar sizlerden ricam,
bu tagları çok ii öğrenin. Asp yada Php yada başka bir tasarım dilini kullanırken, bu kodlara çok ihtiyacınız olacak !..
iLk dersimizde öğrenmiştik, sayfamızın içeriğini <body> tagları arasına yazıyoruz diye. Bunu hatırladıktan sonra,
Şimdi arkadaşlar, çalışma yaptığımız not defterimizi açıyoruz ve aşağıda vermiş olduğum kodları ekliyoruz.

Kod: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254"
</head>
<title>
HackHeLL !! OnLine HtmL DersLeri !!
</title>
<body>
<font face=Arial> Arial Yazı Tipi İle Yazılacak </font><br>
<font size=4> Yazı Büyüklüğü +4 oLacak </font><br>
<font color=Red> Yazı Rengi Kırmızı oLacak </font><br>
<font face=Arial size=4 color=Red> Yukarda ki herşeyi bir anda kullandık </font>
</body>
<html>

Yukarda ki Örnekte Ne Yaptık ?
Arkadaşlar öncelikle sayfamızın başlığını belirledik ve sayfamızı türkçeleştirdik. Daha sonra, yazı şeklini, büyüklüğünü ve rengini belirleyerek, yazılarımızı yazdık. En sonunda ise, bütün tagları nasıl birleştirebileceğimizi gösterdim.

Yukarda ki kodları kaydedip, html sayfamıza baktığımız zaman, karşımıza aşağıda bulunan resim gibi görünecektir yazdıklarımız !..





2. Ders - 2. Konu
Arka pLan Rengini Değiştirmek​

Arkadaşlar 2. Dersimizin 2. Konusuna Hoşgeldiniz :=)
Sürekli beyaz tabanda yazılarımızı yazacak değiliz tabi ki =)
Şimdi sıra geldi arka plan rengini değiştirmeye.
Arkadaşlar bu değişim, <body> tagının değişik bir şekli ile ortaya çıkmaktadır.
Arka planı değiştirmek için gerekli olan kod;
Kod: 
<body bgcolor="RENK">
Bu kodumuzu yazdıktan sonra, normal <body> tagımızın içeriğine devam ediyoruz ve en sonunda da tagımızı kapatıyoruz.
RENK yazdığım yere, renklerin ingilizce karşılığı yazılacaktır fakat burda önemli bir hususu söylemek istiyorum. Bu yoldan gidersek eğer, yani ingilizce karşılıklarını yazarsak, kullanacağımız renk sayısı sınırlıdır. Dolayısıyla aradığımız renk tonu yukarda ki özellikte bulunmayabilir.
Doğada bulunan 3 ana rengin (kırmızı,yeşil,mavi) karışımlarından yeni renkler ve tonlar elde edebilirsiniz.
Eğer istediğimiz renk tonu ingilizce karşılıkta yoksa, kodumuzu şu şekilde değiştiriyoruz.
Kod: 
<body bgcolor="#kkyymm">
yukardaki kodda yazdığımız "kkyymm"nin açılımı, kırmızıkırmızıyeşilyeşilmavimavi
Bunları karıştırarak bir renk tonu elde edebilirsiniz.
Arkadaşlar bu kkyymm 'nin yerlerine 1-9 arası sayılar ekleyeceksiniz.
Şimdi birlikte bir örnek yapalım !.. Çalışma dosyamızı açıyoruz ve aşağıda ki kodları yazıyoruz

Kod: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254"
</head>
<title>
HackHeLL !! OnLine HtmL DersLeri !!
</title>
<body bgcolor="#568574">
<font face=Tahoma size=3 color=White>
HackHeLL OnLine HtmL DersLeri
</font>
</body>
<html>

Kaydediyoruz ve karşımıza aşağıda ki resim çıkıyor. Ne kadar kolaymış değil mi :=)




Arkadaşlar Diğer KonuLar, Vermiş Olduğum Tarihte Hazırlanacaktır.
Bunları şu anda hazırladım ve direkt veriyim dedim :=)

İyi Çalışmalar​
 
saolasın ustat yaaa her ne kadar bilgisayarın icinde olsakda her seyini bilmek mumkun degil bu meretin sayende web tasarımınıda ogrencez valla buyuksun ustat anlatma seklini sevdim hosuma gitti okurken sıkılmıyo insan ve uygulama hevesi doguyo bi yandan mademki derslere basladık yoklama felanda yapalım :) sıradaki dersi 4 gözle bekliyom ustat tekrar saolasın
 
arkadaşlar ilginizden dolayı teşekkür ederim sizlere
kapımız öğrenmek isteyen herkese açıktır.
Daha birlikte testler çözücez, ödevler yapıcaz :)
çok eğlenceli gececek kardeşlerim merak etmeyin :)
 
2. Ders - 3. Konu
Arka pLan'a Resim EkLemek​

Öncelikler Herkese Merhaba Arkadaşlar,
2. Dersimizin 3. konusuyla yine sizlerle birlikteyiz =) Bu dersimizde yine tasarım için oldukça önemli hatta can damarlarından birisi olan, arka plana resim eklemeyi öğreneceğiz.
Öncelikle neler gerektiğine bakalım isterseniz
GEREKENLER !!

* Arka plana Eklemek istediğiniz Resim
* Sakin ve Sessiz Bir Ortam
* Tabi içeceğimizde yanımızda olacak ve kendimizi tamamen derse vereceğiz =)

Evet arkadaşlar dersimize başlamadan önce, neler öğrendiğimizi kısaca hatırlayalım.

* Arka pLan Rengini Değiştirmek
* Yazı StiLLeri [ Büyüklük - Renk - Style ]
* Sayfayı Türkçeleştirmek
* Ortamala - Sağa ve Sola Hizalama
* Koyu - İtalik & Altı ÇiziLi Yazı Yazmak
* Browser Başlığı Eklemek
* KoLay ve Bir o Kadar da ÖnemLi oLan HtmL'ye Giriş

Gördüğünüz gibi baya bi yol aşmışız =)

Evet arkadaşlar resmimizi seçtiysek, dersimize başlıyoruz. Ben siyah bir arka plan fonu kullanacağım, sizlerde hayal gücünüzü kullanarak, istediğiniz gibi bir fon ekleyebilirsiniz.
Çalışma text dosyamızı açıyoruz ve içerisine aşağıda vermiş olduğum kodları ekliyoruz.

Kod: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254"
<title>
HackHeLL'ciLer Merhaba
</title>
<body background="http://www.imagestr.com/pthumbs/small/27472/arkaplancj6.jpg" alt="arkaplancj6.jpg">
</body>
</head>
</html>

Evet arkadaşlar gördüğünüz gibi yukarda ki kodları text dosyamıza yapıştırıp, kaydettiğimiz zaman, istediğimiz sonuca ulaşıyoruz.
Lütfen Aşağıda ki Kodu Bir Yere Not Alınız yada Ezberleyiniz

Kod: 
<body background="http://xxxxxxxxxxx"

Arkadaşlar Son Konumuz Saat 21.00-22.00 Arasında Verilecektir.
İyi Çalışmalar​
 
adsz-6.jpg


Yararlı çalışmalar teşekkürler. Devamını bekliyoruz =)
 
walla HoCuSPoCuS kardeşim çok duygulandım :=)
böyle güsel bi emek görmek gerçekten sevindirdi beni =)
ellerine sağlık canım kardeşim
 
hocam dersler devam etsin mümkünse ne zamandan beri çalışmayı düşündüğüm ama hackhell de takılmaktan çalışamadığım html-php-asp üçlüsünü burda anlatırsan bize çok yararı olur..böylece hem hackhell de takılırım hem de kaparım olayları.sonsuz teşekkürler
 
Arkadaşlar 2. Dersimizin Son Konusu Olan
Herhangi Bir Yere Resim Eklemek
Bugün Akşam Eklenecektir Bilgilerinize !..
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst