daha bugün bi e-bookla basladım html ye dahada ilerletmek istiyorum yardım ve önerilerinizi bekliyorum şimdiden tesekkürler...
canfer_06	
15-12-2007, 16:39 | #2
Yıllanmış Üye
Teşekkür Sayısı: 0
274 mesaj
Kayıt Tarihi:Kayıt: Eyl 2007
arkadaşım sana şöyle kodları basic olarak verebiliriz:
1.1 HTML NEDİR?
HTML, yani Hyper Text Markup Language kısaca bir yazı işaretleme dilidir. Yazının göze hoş gelmesi için şekillendirilmesi, HTML'nin amacıdır. Ancak yazıyı şekillendirirken arada resim, ses gibi öğeler de hoş olacağından HTML bunları da kapsar.
HTML, belgelerin metinler, tablolar, listeler, fotolar içerecek şekilde internette yayımına izin verir. (Karahoca, A.s.7) Basit bir web sayfası hazırlamak için temel olarak HTML komutlarını bilmeniz yeterlidir. Bu bölümde sadece temel HTML komutlarına değinilmiştir.
Çeşitli web dizayn programlarında görsel olarak objelerle hazırlanan sayfaların HTML kodlarını da görüntüleyebilirsiniz. Ayrıca Browser’ ların View Source özelliği ile internette gördüğünüz ilginç sayfaların HTML’ sine ulaşabilirsiniz.
1.2 HTML’ E GİRİŞ?
HTML ile dokümanlar oluşturulurken diğer programlama dillerinde olduğu gibi mantıksal ünitelerden oluşur. Başlıklar, paragraflar veya listelerden oluşabilir. Normal bir editörde yazdığınız HTML kodları için compiler(derleyici) bulunmadığından dolayı hata yapmamaya dikkat etmeniz gerekmektedir.
Tarayıcı program (browser: yani Netscape, Internet Explorer vs.) küçüktür (<) ve büyüktür (>) işaretlerinin arasına yazılan her şeyi HTML komutu olarak yorumlar.
Şimdi temel HTML komutlarından örnekler verelim. Bunun için örneğin note pad’ i kullanabilirsiniz.
<HTML>
<H1>BU BIZIM SAYFAMIZ</H1>
ILK DENEME SAYFASIDIR. <BR>
BU <I> ITALIK </I> BIR YAZI <BR>
BU DA <B> KALIN </B> BIR YAZI
</HTML>
Bu dosyayı ilk.html adıyla boş bir dizine kayıt (save) edin ve tarayıcı programınızla bu dosyayı çağırın. (Kaydettiğiniz dosyaya çift tıklayarak ya da "file" mönüsünden "open" ile bu dosyayı seçerek)
Yazdıklarımıza dikkat ederseniz komutlar "<KOMUT>Komuttan etkilenecek yazı</KOMUT>" şeklindedir. "<B>kalın</B>" kalın(bold), "<I>italik</I>" italik yazı yazmamızı sağladı. Hemen hemen tüm HTML komutlarında aynı mantık hakimdir. Ancak bazı komutlarda "</KOMUT>" ile komutu kapatmak gerekli değildir. Bunlardan ilk akla gelenler <BR> ve <IMG> komutlarıdır. Bu komutlar bir yazı grubunu etkilemediğinden </BR> ile kapatılmasına gerek yoktur. Aynı şey<IMG>, yani resim ekleme komutunda da geçerlidir.
1.3 Başlıca HTML Komutları
HTML ile ilgili en temel komutlara bakalım, ayrıntılı açıklama ve örnek sayfa, tablodan sonra:
KOMUT AÇIKLAMA
<HTML>
Metnin HTML olduğunu belirtir.
<HEAD>
Dokümanın içreği hakkında bilgi verir.
<TITLE>
Sayfaya başlık verir.
<BODY>
Dokümanın içindeki tüm paragrafları listeler.
<H1>
Metne ana başlığını verir.
<B></B>
Kalın Yazı
<I></I>
İtalik yazı
<CENTER></CENTER>
Ortalamak
<BR>
Satır başı
<P>
Paragraf başı
<HR>
Yatay çizgi
<BACKGROUND>
Arkaya plana yayılacak resmi seçer.
<BGCOLOR>
Renk ayarlar.
<A HREF="hakkımda.html"></A>
Diğer sayfalara bağlantı
<IMG SRC="images/sahil.gif" ALT="sahil resmi">
Resim yerleştirmek
<FONT> </FONT>
Yazının özellikleri.
<LI>
Listeleme yapar.
<BLINK>
Yazının yanıp sönmesini sağlar.
1.3.1 <HTML> Komutu
HTML, en dıştaki elemandır. Bu eleman metnin bir HTML dokümanı olduğunu işaret eder. Ayrıca bu eleman web sayfasını gösteren programa HTML dilinin versiyonunu belirtir. (Karahoca .A,s.15)
1.3.2 <HEAD> Komutu
HEAD komutu dokümanın içeriği hakkında bilgi verir. Bu bilgi dokümanın bir parçası gibi Web tarayıcısından (Nescape ve Internet Explorer) görünemez. (Karahoca.A,s.15)
1.3.3 <TITLE> Komutu
"TITLE" sayfaya başlık vermek için kullanılır. Bu başlık tarayıcınızın en üstündeki kutucukta ve taskbar'da yazar.
1.3.4 <BODY> Komutu
HTML dokümanının içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15)
1.3.5 <H1> Komutu
<BODY> elemanından sonra gelen <H1> komutu en büyük fontlu başlıktır. H1-H6 arasındaki başlıkların büyüklükleri azalan sıradadır. (Karahoca.A,s.15)
Kullanımı:<HTML>
<BODY>
<H1>ANA BASLIKTIR</H1>
<B></B> Komutu
Yazının koyu renkte yazılmasını sağlar.
Kullanımı: <B> buraya yazılan metin koyu renk basılır </B>
<I></I> Komutu
Yazının italik yazılmasını sağlar.
Kullanımı: <I> buraya yazılan metin italik basılır </I>
<CENTER></CENTER> Komutu
Yazı, resim, çizgi, tablo ve listelerin ortalanmasını sağlar.
Kullanımı: <center> bu aradakiler tüm sayfayı ortalamış olarak ekrana görüntülenir. </center>
<BR> Komutu
Satır başı yapar.
Kullanımı: <BR>
1.3.10 <P> Komutu
"<P>" komutu paragraf başı yapar ancak bu paragraf başı Türk yazı standartlarına uymaz. Türk standartlarına göre yeni paragrafın ilk satırı biraz içeriden başlar. Ancak HTML’ deki paragrafta yeni paragraf içeriden başlamaz. İçeriden başlamaması çok önemli bir sorun değildir.
"<P>" komutunun bir tane seçeneği vardır: "ALIGN". Eğer <P ALIGN="RIGHT"> şeklinde kullanırsanız </P> işaretine kadar olan yazılar hem paragraf başı yapılmış olacaktır, hem de yazı sağa yanaşık görünecektir. <PALIGN="JUSTIFY"> şeklinde kullanırsanız satır sonları hizalanacaktır.
<HR> Komutu
Yatay bir çizgi çizer. Bu çizgi ayırıcı olarak kullanılabilir. Yazıların sonuna eklenemez. HR komutu otomatik olarak yeni satırdan başlayacaktır. Seçenekleri ise şu şekildedir:
<HR WIDTH=80% SIZE=5>
Burada "WIDTH" yatay çizginin tüm sayfaya olan oranıdır. Eğer % işaretini koymazsanız piksel cinsinden sabit bir uzunlukta çizgi çizersiniz. "SIZE" piksel cinsinden çizginin kalınlığıdır. (Pixel'i açıklamayacağım. 1-30 arası değerler vererek kendiniz görebilirsiniz). Bunun yanında "HR" komutunda kullanılan bir seçenek de "NOSHADE"dir.
<HR NOSHADE> yazarsanız yatay çizgi üç boyutlu görünmeyecektir.
1.3.12 BACKGROUND Komutu
Arka plan resmi sayfanıza oldukça güzel bir görüntü veren bir özelliktir. Sayfanızın arka plan resmi olarak gif, jpg, jpeg uzantılı resim dosyaları kullanabilirsiniz.
Kullanımı:
<BODY BACKGROUND= “c:\ucak.jpg”>
1.3.13 BGCOLOR Komutu
BGCOLOR sayfanın arka plan rengi (#000000 = siyah);
Kullanımı:
<BODY BGCOLOR= “#FFFFF”>
ya da
<BODY BGCOLOR=’Yellow’>
1.3.14 <A HREF> Komutu
Bağlantılar, HTML’ DE çok kullanılan komutlardandır. Bu yüzden mantığını iyi anlamanız gerekir. Yapmanız gereken tek şey <A HREF="URL">Açıklama</A> komutunu sayfanızda herhangi bir yere yerleştirmek. Burada URL olayı çok önemlidir.
URL;
html, jpg, gif, js, wrl vb. uzantılı herhangi bir dosya adı olabilir;
[Linkleri sadece kayıtlı üyelerimiz görebilir. WebArsiv.com üyesi olmak için tıklayın...] şeklinde bir web sayfası adresi olabilir;
şeklinde bir news sunucusu adresi olabilir;
şeklinde bir ftp adresi olabilir;
şeklinde gopher adresi olabilir;
şeklinde telnet adresi olabilir ya da
mailto:esin@sirius.gazi.edu.tr şeklinde bir e-posta adresi olabilir.
Görüldüğü gibi birçok seçenek bulunuyor. Eğer web sayfanızın bulunduğu sunucudaki dosyalara ulaşmak istiyorsanız doğrudan dosya adını yazacaksınız, yoksa protokol://adres şeklinde bir yapı kullanacaksınız; ya da bağlantıya tıklandığında e-posta atılmasını istiyorsanız mailto: yazısını kullanacaksınız.
Örnekler:
<A HREF="yeni.html">Bir başka sayfanız</A>
<A HREF="../index.html">Bir üst dizindeki başka bir sayfanız</A>
<A HREF="http://www.angelfire.com/ne/esin/anasayfa.html">Esin’ Sayfası</A>
<A HREF="http://www.gazi.edu.tr">Gazi Üniversitesi</A>
<A HREF="ftp://ftp.metu.edu.tr/pub">ODTU ftp sitesinde istediğiniz programları
bulabilirsiniz</A>
<A HREF="gopher://gopher.gazi.edu.tr">Gazi Üniversitesi gopher servisi</A>
<A HREF="telnet://bbs.bilkent.edu.tr:3000">Buces BBS</A>
<A HREF="mailto:hayse@sirius.gazi.edu.tr">Mail me</A>
<A HREF="dene.jpg">Deneme resmi</A>
1.2.15 <IMG SRC> Komutu
Sayfanıza herhangi bir resmi eklemek için <IMG SRC="dene.gif"> gibi bir satır yazmanız gerekiyor. Ancak dene.gif adlı bir dosyanın bulunması ve bu dosyanın yazmakta olduğunuz html uzantılı dosya ile aynı dizinde bulunması lazım. (örneğin deneme.html dosyası C:\WebProjects\ dizinindeyse dene.gif de o dizin altında bulunmalı). Aksi taktirde resim yerine, resmin bulunamadığını ifade eden garip bir işaret çıkar.
Sayfanıza resim eklemeye başladığınız zaman çok fazla resim dosyası olduğunda bunları bir alt dizinde toplamak isteyebilirsiniz. Örneğin deneme.html dosyası C:\WebProjects\ altındayken dene.gif dosyasını (ve diğer resimleri) C:\WebProjects\resimler\ altına koyduysanız:
<IMG SRC="resimler/dene.gif">
şeklinde bir komut yazmanız gerekecektir. Aynı DOS'ta cd komutunu kullanmak gibi ama burada \ yerine / kullanacaksınız. Aynı şekilde C:\Windows\ altındaki bir resmi çağırmak için:
<IMG SRC="../windows/dene.gif">
komutunu yazmanız gerekir. (.. bir üst dizin demek. Aynı mantıkla ../.. iki üst dizin oluyor)
Diyelim ki DENE.GIF adlı bir resminiz var ve bu resmi sayfanıza yerleştirmek istiyorsunuz. Eklemek istediğiniz html dosyasının adı da "resim.html" olsun. Şimdi öncelikle DENE.GIF dosyasını resim.html dosyasının bulunduğu dizine (directory ya da folder) kopyalayın. Sonra da resim.html dosyasının herhangi bir yerine <IMG SRC="DENE.GIF"> yazın. Burada dikkat edilmesi gereken nokta resim dosyasının tam adıdır. Örneği resim dosyanızın adı dene.GIF olsaydı <IMG SRC="dene.GIF"> şeklinde yazmanız gerekir. Böylece web sayfanıza resim eklediniz. Şimdi tarayıcı programınızla açıp sayfanıza bakın. Komutu yazdığınız yerde resmin çıktığını göreceksiniz.
Resimlerle ilgili birçok seçenek vardır. Tüm seçeneklerin kullanıldığı bir IMG komutu örneği şu şekildedir:
<IMG SRC="images/dene.jpg" BORDER=2 WIDTH=20 HEIGHT=35 ALT="Bu deneme adlı resim" ALIGN="LEFT" LOWSRC="images/dene-dusuk-cozunurluk.gif">
"SRC" seçeneğinde resim dosyasının ismi yazılır. "BORDER" seçeneği ile resminize çerçeve verebilir ya da "BORDER=0" yazarak var olan çerçeveyi kaldırabilirsiniz. "WIDTH" ve "HEIGHT" ile resimlerinizin boyutlarını değiştirebilirsiniz. Ancak bu durumda resim kalitesi düşebilir.
Eğer PhotoShop® ya da PaintShop gibi resim editörlerinden birini kullanmayı biliyorsanız resmin boyutlarını WIDTH - HEIGHT ile değil editörle küçültünüz. Çünkü editörle küçültüldüğünde resmin byte olarak büyüklüğü düşecektir, bu da sayfanızın daha çabuk yüklenmesini sağlayacaktır.
"ALT" ile resminize alternatif bir yazı koyabilirsiniz. Bu yazı herhangi bir nedenden dolayı resim görünmediğinde ve yeni tarayıcı programlarda fare imleci resmin üzerine geldiğinde görünecektir. Bütün resimlerinize bir alternatif yazı yazmayı alışkanlık haline getirmelisiniz.
"ALIGN" seçeneği resmin yazıya göre konumunu belirtir. Eğer "LEFT" yazarsanız resim sola yanaşacak ve "IMG" komutundan sonra yazılan tüm yazılar resim bitene kadar resmin sağına yazılacaktır. Ancak resim bitmeden yazının resmin solundan kurtulmasını istiyorsanız <BR CLEAR="LEFT"> yazmalısınız. Burada "LEFT" ya da "RIGHT" kullanabilirsiniz.
1.3.16 LI Komutu
Liste oluşturulmasını sağlar.
1.3.17 <FONT></FONT> Komutu
Sayfanızda kullandığınız yazıların büyüklüğünü, rengini ve yazı tipini seçebilirsiniz. Yazıların her türlü özellikleri "FONT" komutu ve bu komutun içine yazılan seçeneklerle belirlenir. Seçenekler şu şekildedir:
Seçenek Açıklama Örnek
SIZE Yazı büyüklüğü <FONT SIZE="+1">...</FONT>
COLOR Yazı rengi <FONT COLOR="#FF0000">...</FONT>
FACE Yazı türü <FONT FACE="Times New Roman">...</FONT>
SIZE seçeneğini iki türlü kullanabilirsiniz. (+,-) ile o anki yazı büyüklüğüne göre değer verebilirsiniz, ya da doğrudan 1 ile 7 arası bir rakam ile büyüklüğünü belirtebilirsiniz. Yazıya müdahale etmediğiniz sürece yazı büyüklüğü "3"tür. Örneğin "FONT SIZE=+1" komutunu kullanırsanız yazı büyüklüğü 4 olacaktır. Aynı sonucu "FONT SIZE=4" yazarak da elde edebilirsiniz.
COLOR seçeneği için BODY komutunu referans alın. Oradakine benzer bir şekilde seçili olan (yani <FONT> ve </FONT> arasında kalan) yazının rengini değiştirebilirsiniz. Renklerin tanımı için renk referansı kısmına bir bakın.
Face seçeneği için; standart olarak kullanabileceğiniz yazı türleri arasında Arial, Helvetica, Times New Roman, Comic Sans, Courier, Tahoma ve Verdana yer alır.
1.3.18 <BLINK> Komutu
Yazının yanıp sönmesini sağlar.
Kullanımı:
<BLINK>YANIP SONEN YAZI</BLINK>
1.4. HTML ile WEB SAYFASI HAZIRLAMA
Aşağıdaki kodu not padde “Anasayfa.html” olarak kaydedin.
<HTML><head>
<title> html öğreniyorum </title>
<center><b><font size=7>BU BİZİM SAYFAMIZ<font> </b>
<BODY BACKGROUND="C:\webtas\resim\star.jpg"
TEXT="white" LINK="yellow" VLINK="cyan"
ALINK="red">
<center> </br></p>
<div align><img src="c:\webtas\resim\sahil.gif" width=500
height=300 alt="Hayat Bir Sahildir.">
<br>
<font size=5>
<FONT COLOR="yellow">
<br>
<a href="http://www.gazi.edu.tr" >Universitemiz </a> </p>
<a href="http://www.altavista.com" > Web'de Kolay Arama </a> </p>
<a href="http://www.komik.net" > Komik Bir Site </a> </p>
<a href="mailto:apachi79@hotmail.com">
</p>
<img src="c:\webtas\resim\letter.gif" border=0 alt="mail me:apachi79@hotmail.com" align=bleedleft>
<a href="mailto:apachi79@hotmail.com"> </a>
<font size=2>
<FONT COLOR="white">
<center>
Son Güncelleme Tarihi</br>
3.Kasım.2000 Ankara
Bu sayfadan bir link seçilip ayrıldığında bu sayfaya geri dön mek için aşağıdaki kodu yazmak gerekir.
<a href="http://www.anasayfa.html" > Ana sayfaya dön </a> </p>
Burada önemli olan dönmek istediğiniz html uzantılı dosyanın isminin doğru verilmesidir
__________________
[color=red]~!WebArsiv Arkadaşlik Grubu!~
erdem187	
15-12-2007, 16:41 | #3
Yıllanmış Üye
Teşekkür Sayısı: 1
2,334 mesaj
Kayıt Tarihi:Kayıt: Ağu 2007
teşekkürler...paylaşım için..
sys	
20-12-2007, 09:57 | #4
Yıllanmış Üye
Teşekkür Sayısı: 0
118 mesaj
Kayıt Tarihi:Kayıt: Ağu 2007
ii paylaşım tebrikler!!! bi de alıntı mı yoksa tek tek yazdın mı???
canfer_06	
20-12-2007, 10:14 | #5
Yıllanmış Üye
Teşekkür Sayısı: 0
274 mesaj
Kayıt Tarihi:Kayıt: Eyl 2007
alıntı
mawoix	
23-12-2007, 16:30 | #6
Yeni Üye
Teşekkür Sayısı: 0
38 mesaj
Kayıt Tarihi:Kayıt: Ara 2007
arkadaşım bence gerçekten öğrenmek istiyorsan kimseyi dinleme internetten bir html template indir not defteriyle içini aç incele değişiklikler yap. templateyi felç edersen baştan yükle baştan dene. bana şahzen abartı yok kimse öğretmedi. kendim indirdim inceledim fln şimdi kurduyum ve webmasterlik yapıyorum. bırak kendin öğren. sakın program fln indirme eğer programla yaparsan webmaster deil editör olursun oke;)
Jorell	
17-02-2008, 00:50 | #7
Yıllanmış Üye
Teşekkür Sayısı: 0
621 mesaj
Kayıt Tarihi:Kayıt: Ara 2007
Bilmiyorum öğrenebildin mi 1,5 aydır ilgilendin mi ancak , ben de kendime ait bir "günlük" (blog) açtım üyelik veren bir ağalanından .. ve şablonumu düzenlemek istiyordum , yani özgünleştirmek istiyordum .. ve kısmen de olsa başardım .. Bunu yapabilmem için HTML'in temel kodlarını bilmem gerekiyordu .. google'da arattım HTML öğrenmek diye .. karşıma gelen bağlantılardan da inceledim , temel kodları öğrendim ve bunlar benim işime yarıyor şu an .. her neyse , sonra başka günlükleri gezdim , sayfaların kaynaklarını görüntüledim ve neler yapılmış az çok kavramaya başladım .. Örneğin nereye ne eklenmiş , nerede ne değiştirilmiş gibi .. böylece bir düşüncem , bilgim oldu küçük de az da olsa .. ve sayfama 5 6 tane değişik şey ekledim ..çok da hoşuma gitti açıkcası , özgünleştirdim sonuçta .. kendime ait oldu ..
aynı zamanda da html'e giriş yaptım .. ve artık iyice de öğrenmek istiyorum .. =) Sen de benim gibi yap derim ben ..
07BENER07	
14-06-2008, 12:29 | #8
Yıllanmış Üye
Teşekkür Sayısı: 0
1,699 mesaj
Kayıt Tarihi:Kayıt: May 2008
bende kendim öğrendim araştıra araştıra anladım kendime bir de site yaptım orda ne yapabildiğimi gördüm
başarabilceğine inandığın zaman olmayacak diye bir şey kalmıyor zaten
mete-han	
14-06-2008, 23:50 | #9
Yıllanmış Üye
Teşekkür Sayısı: 1
118 mesaj
Kayıt Tarihi:Kayıt: Mar 2008
evet son yazan 2 arkadas ların sozlerı bihayli dogrular ve bilgileriyle konusuyolar EĞER sen web dili olan html i iyi ögrenmek istiyosan şayet bir template veya html ile iyi kodlanmıs web page ( web sayfaları ) pc ne kaydet ve text editorlerle aç, biryandan da internet exp ile aç DİKKARLİCE ANLAMAYA ÇALIŞ ve sağlam dökümanları da takip et (kodlamayı bılmek için ) böyle anlayabılırsın
ha programlar la da sadece edit yaparsın okadar...
mete-han@hotmail.co.uk
sw_cedays	
04-07-2008, 12:10 | #10
Yıllanmış Üye
Teşekkür Sayısı: 0
154 mesaj
Kayıt Tarihi:Kayıt: Tem 2008
hiç bir bilgim olmadan HTML yi öğrenmem 1 günümü aldı . 1 - 2 günde pekiştirdim .istersen çok kısa sürede öğrenebilirsin.