Html Dersleri

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Çevrimdışı kardelen

  • *****
  • Join Date: Nis 2008
  • Yer: Hatay / İskenderun
  • 3198
  • +238/-0
  • Cinsiyet: Bay
Html Dersleri
« : 06 Eylül 2008, 03:55:51 »
1. HTML Dersi

HTML ye cesaret kazanmak (Web HTML)

web sayfalarının temeli html dir. bu bir kısaltmadır (H) + (T) + (M) + (L) = HTML harflerinin herbiri ingilizce bir kelimeye karşılık gelmektedir.

HTML nelerden oluşur?
HTML etiketlerden (taglardan) oluşur.
HTML deyince aklınız karışmasın HTML sayfaları düz yazıdır. Evet evet bildiğiniz düz yazıdır. fakat bu düz yazıyı oluşturan etiketler topluluğunun herbiri ingilizce kelime yada kelime kısaltmalarından yapıldığı için biraz karışık gelebilir.Bu karışıklığı giderebilmemiz için sizin istek + çaba + sürekliliğinize ihtiyacımız var.

Bu ingilizce kelimeler yada kısatmalar etiket (tag) olurken başına < işareti konur ve kelime yada kısaltma bittikten sonra da > işareti konarak etiketin (tagın) başlangıcı elde edilir.
<h3> Bu html etiketi olan "header 3"ün başlangıcını gösterir.

başlayan herşeyin bitirilmesi gerekir.

html etiketinin bitişi başlangıcı gibidir tek farkla ki < işaretinden sonra / işareti vardır: </h3> bu html etiketi olan "header 3" ün bitişini gösterir



web sayfaları (html sayfaları) etiketlerden (taglardan) meydana gelir demiştik.

etiketin önü <h3> etiketin içi </h3> etiketin sonrası

teori pratik olmadığında sıkıcı olmaya başlar
hadi şimdi pratiğe geçelim.

klavyedeki windows tuşu hangisidir?
Ctrl ile Alt tuşları arasındaki tuştur, windowsun başlat menüsünü açan tuştur.
windows tuşuyla bazı tuşlara birlikte basarak bazı program yada süreçleri başlatabilirsiniz.


windows tuşu ile R tuşlarına birlikte basalım (buradaki R = Run kelimesinin ilk harfini temsil eder)
gelen pencereye notepad yazalım ve entere basalım
notepad nedir?
windowsta düz yazı yazabilmeyi sağlayan bir programdır.
bu program microsoft wordun en ilkel halidir. ve windows işletim sistemleriyle birlikte gelen (her makinada olan) bir programdır.



şimdi düz yazı yazmaya başlayabilir miyiz?

aşağıdaki satırı yazıp dosyayı kaydedelim dosyanın ismi şu olsun web-tasarimi-1-1.html (veya ilkders.html şeklinde de isim verebilirsiniz, farketmez)

etiketin önü <h3> etiketin içi </h3> etiketin sonrası


Şimdi bu dosyayınızı (web-tasarimi-1-1.html) internet tarayıcısı (web browser) ile açıp bakınız.
Benim yazdığım dosya ile aynı görüntüyü elde edebildiniz mi? Benimkini görmek için buraya tıklayınız.

Eğer aynı görüntüyü elde edemediyseniz lütfen dosya soyadını kontrol edin txt olmaMAsı gerekiyor. Notepad programında kayıt yaparken dosyaya isim verdikten sonra Dosya türünü Tüm dosyalar (All Files) şeklinde seçiniz. txt seçili olursa dosyanız otomatik olarak yazı türünde kaydedilir; ama bizim dosya türümüz (dosya soyadı) html olmalıdır.

1. dersimiz bitmiştir.

sizin bir dahaki derse kadar yapacağınız pratik şudur:
3 rakamı yerine başka rakamlar denemek
birden fazla header html etiketini (<h3> </h3>) denemek
selametle kalın.


Kaynak:http://www.htmldersleri.info/web-html.php

Çevrimdışı D®agon

  • Ezberletmez Öğretir
  • *******
  • Join Date: Mar 2008
  • Yer: Ankara
  • 11656
  • +524/-0
  • Cinsiyet: Bay
    • Arif Hocam
Ynt: Html Dersleri
« Yanıtla #1 : 06 Eylül 2008, 03:57:55 »
Elinize sağlık hocam. tşkk  frrr

Hayırdır inşAllah,nerden çıktı şimdi bu?

Çevrimdışı kardelen

  • *****
  • Join Date: Nis 2008
  • Yer: Hatay / İskenderun
  • 3198
  • +238/-0
  • Cinsiyet: Bay
Ynt: Html Dersleri
« Yanıtla #2 : 06 Eylül 2008, 04:00:23 »
Bu dili öğrenmeye meraklı bir çok kardeşimiz var.Faydalı olur diye düşündüm. hyhvv
Hatamı yaptım yoksa? ksss

Çevrimdışı D®agon

  • Ezberletmez Öğretir
  • *******
  • Join Date: Mar 2008
  • Yer: Ankara
  • 11656
  • +524/-0
  • Cinsiyet: Bay
    • Arif Hocam
Ynt: Html Dersleri
« Yanıtla #3 : 06 Eylül 2008, 04:03:27 »
Yoo hocam...Sadece merağımdan sordum.Bencede iyi olur. allks

Bilgimizi tazeleriz sayenizde.

 tşkk

Çevrimdışı kardelen

  • *****
  • Join Date: Nis 2008
  • Yer: Hatay / İskenderun
  • 3198
  • +238/-0
  • Cinsiyet: Bay
Ynt: Html Dersleri
« Yanıtla #4 : 06 Eylül 2008, 04:13:21 »
2. HTML Dersi

HTML de Sıkça kullanılan bazı etiketler ; BR B Font ... (HTML Font)
Önceki dersimizi hatırlatarak başlamak istiyorum
etiketin önü <h3> etiketin içi </h3> etiketin sonrası
yukarıdaki ifadeyi notepad ile ilkders.html dosyasının içine yazıp internet tarayıcınızda açtığınızda aşağıdaki gibi bir görüntü elde etmiş olmanız gerekir:

etiketin önü
etiketin içi
etiketin sonrası

aşağıdaki örnek yazıda <h3> değil <h2> ve <h4> tagı kullanılmıştır. header kelimesinin ilk harfi olan h den sonra <h?> 1,2,3,4,5,6 rakamlarından birisi gelebilir. Gelebilecek rakamlar 1 den 6 ya kadardır ve rakam küçüldükçe yazı büyür.
--------------------------------------------------------------------------------

BİLİM VE TEKNOLOJİ
İnsanoğlu varolduğundan beri şunu yapagelmiştir: Öncekilerden devraldığı iş kolaylaştırıcı aletleri kullanmış bununla birlikte o aletleri iyileştirmek için ayrı bir zaman harcamış ve yeni aletler de bularak gelecek nesile geçmişten aldığı bilgi birikimini devretmiştir. Günümüzde insanoğlunun hayatında kullandığı aletlerin sayısı o kadar arttı ki bu devralma ve geliştirme işlemi özel ticari firma yada devlet kurumları tarafından yapılır oldu. oluşan bilgi birikimi de geleceğe bu şekilde aktarıldığından dolayı şöyle bir tehlike oluştu: bir alandaki aletlerin bilgisi sadece belli başlı firma yada devletlerin elinde bulunma tehlikesi.
Bilgasayar teknolojisi kimlerin elinde?
Bilgisayar denince tek parça bir teknolojik alet akla gelmesin; merkezi işlem birimi, anakart, bellek, sabit disk, cd sürücüsü, disket sürücüsü, kasa, elektrik enerjisinin ilk uğradı kısım olan power supply, ekran (monitör), klavye, fare gibi çeşitli parçalardan oluşan bilgisayarın olmassa olmazlarından birisi de bilgisayar programlarıdır. Bilgisayarın birşeyleri nasıl yapacağını söyleme şekillerden birisi olan html yazmayı (inşaAllah) sizlerle ileride programcılığa dönüştüreceğiz. web tasarımından olayı programcılığa taşırken kullanacağımız bazı birleşenler şunlardır: javascript, php, asp, sql ve java ...
--------------------------------------------------------------------------------

Yukarıdaki örnek yazıyı incelediğinizde farkedeceğiniz gibi <h?> etiketinden önce ve sonra boş paragraf var.
Ayrıca <h?> etiketinin başladığı yerden bitiş yeri olan </h?> 'e kadar koyu (bold) harflerle yazıldı.

önceki dersimizde elde ettiğimiz görüntüyü, şimdi de farklı bir yollla elde etmeye çalışalım.
Bunun için
 html etiketini , <font> etiketini ve etiketini kullanacağız.


--------------------------------------------------------------------------------


 etiketinin (tagının) açıklaması:
ingilizce "Inserts a line break" ifadesininden kısaltılarak elde edilmiştir.
 etiketi kendinden önceki yazı ile kendinden sonraki yazıların farklı paragraflarda olmasını sağlar. Arka arkaya iki kez
 
 kullanılırsa ne olur?
etiketin önü <h3> etiketin içi </h3> etiketin sonrası
Yukarıdaki ifadenin görüntüsünü hatırlayın. Etiketin içi ifadesinin öncesinde ve sonrasında boş paragraflar var. bu görüntüyü iki defa arka arkaya
 kullanarak elde edebiliriz.
Birçok html etiketi (tagı) <falan html tagı> şeklinde başlar ve </falan html tagı> şeklinde son bulur.
Ama
 gibi bazı etiketler bunun dışındadır. Yani </br> diye birşey YOKTUR!

--------------------------------------------------------------------------------

etiketinin açıklaması:
ingilizce bold kelimesinin ilk harfi olan bu html etiketi de diğer %90 html etiketleri gibi başladıktan sonra bitmesi gerekir .
başladığı yerden bittiği yere kadar olan yerdeki yazıları koyu yapan bu etiketi kullanırken dikkat etmeliyiz. eğer kapatmayı unutursak ne olur? Birçok web tarayıcısı (web browser) kapatılmayan html etiketlerini web sayfasının en sonunda kapatılmış gibi işlem yapar. Yani kapatılmayan bold etiketi bütün yazının koyu olmasına neden olacaktır.

--------------------------------------------------------------------------------

<font> </font> etiketinin açıklaması:
Html sayfalarında yazıya verilebilecek özelliklerden olan yazı şekli, yazı büyüklüğü, yazı rengi gibi özellikler <font> </font> etiketiyle yapılır.

Bildiklerimize bir bilgi daha katalım:
etiketin öncesi <font size=5> font etiketinin etkilediği alan </font> font etiketinin sonrası
şunu görmüş olduk herhangi bir html etiketinin özelliği olabilir ve bu özellik çeşitli değerler alır.
Burada html etiketi olan fontun size özelliği 5 değerini almış.

<font özellik="özelliğin aldığı değer"> Font etiketinin etkilediği alan </font>
İkinci dersimiz de bitmiştir.
bu dersi uygulamanızı istiyorum. Bunun için önceki dersimizde oluşturduğunuz html dosyanızı açıp devamına font tagını çalışırken şunları yapabilirsiniz:

ilkders.html dosyasını daha çabuk nasıl açabilirsiniz?
1) Birinci derste oluşturduğunuz html dosyasının üzerindeyken
2) farenin sol tuşuna tıklayınn
3) farenin sol tuşunu basılı tutarak notepad programnın üzerine fareyi hareket ettirin
4) notepad üzerine gelince farenin sol tuşunu bırakın.
Böylece ilkders.html dosyasını notepad üzerine sürükle bırak yaparak açmış oldunuz.

Eğer ilkders.html dosyasını tuttuğunuzda bırakmak için notepad göremiyorsanız

1) <font size="buraya çeşitli rakamlar girerek sonucu gözleyin> buraya her seferinde farklı yazılar yazarak font etiketinin etkisini gözleyin </font>

2) <font size="2"> Buraya yazdığınız yazının çeşitli yerlerinde
 tagını kullanın ve üzerinde düşünün </font>