Html Dersleri

kardelen · « **Yanıtla #5 :** 06 Eylül 2008, 04:19:47 »

[color=purple][b]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 html etiketini , etiketini ve 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ı 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.

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.

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

 web sayfası yapmak çok zevkli bir iştir. 

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.

[img]http://www.htmldersleri.info/sonbaslayan_ilkkapanir.jpg[/img]

 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.

Kaynak:http://www.htmldersleri.info/html-dersleri-3.php[/b][/color]

kardelen · « **Yanıtla #6 :** 06 Eylül 2008, 04:28:08 »

[b]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
 Sarı renkte yazı yazmak .

Aynı işlemi aslında şu şekilde yapmamız gerekiyor; çünkü bütün renklere (16 milyon renge) isim veremeyiz:
 Sarı renkte yazı yazmak 

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

[img]http://www.htmldersleri.info/ana-html-sablon.jpg[/img]

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>

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.
[img]http://www.htmldersleri.info/title-web-tasarim-dersleri.jpg[/img] 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">

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

</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. [/b]

hamlet · « **Yanıtla #7 :** 06 Eylül 2008, 07:05:12 »

aarroo 103 Bende siye yaparım artık. ksss çok zora benziyor ooff

Halime · « **Yanıtla #8 :** 06 Eylül 2008, 20:15:18 »

[b] ya bende ögrenmek istiyorum ama anlamıyorum bu yazılardan bişey ya cry[/b]

kardelen · « **Yanıtla #9 :** 07 Eylül 2008, 02:42:29 »

[color=purple][b]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.

 
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.

 
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.

 
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:

 Altı çizili yazı yazmamızı sağlar
 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.

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"> 
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 ....



</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:
 etiketini açtık henüz font etiketi kapanmadan () bir başka etiket açtık (italik yazma).
Bu iki etikette henüz kapanmadı ve biz 3. etiket olan &ltU> (altı çizilmiş yazı) açtık.

Lütfen Etiketlerin kapatılma sırasına dikkat edin.
en son açılan kapatılıyor 
daha sonra kapatılıyor 
en son da kapatılıyor

Html Dersleri

kardelen

Ynt: Html Dersleri

kardelen

Ynt: Html Dersleri

hamlet

Ynt: Html Dersleri

Halime

Ynt: Html Dersleri

kardelen

Ynt: Html Dersleri