html öğreniyorum.tavsiyesi olan? - Web Tasarım Genel

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.

BU ITALIK BIR YAZI

BU DA KALIN 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. "kalın" kalın(bold), "italik" 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 ve <IMG> komutlarıdır. Bu komutlar bir yazı grubunu etkilemediğinden 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.

Kalın Yazı

İtalik yazı

<CENTER></CENTER>
Ortalamak

Satır başı

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

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>

Komutu
Yazının koyu renkte yazılmasını sağlar.

Kullanımı: buraya yazılan metin koyu renk basılır

Komutu
Yazının italik yazılmasını sağlar.

Kullanımı: buraya yazılan metin italik basılır

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

Komutu
Satır başı yapar.

Kullanımı:

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

"" komutunun bir tane seçeneği vardır: "ALIGN". Eğer şeklinde kullanırsanız 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:

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ı:

1.3.13 BGCOLOR Komutu
BGCOLOR sayfanın arka plan rengi (#000000 = siyah);

Kullanımı:

ya da

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="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:

ş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:

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:

"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 yazmalısınız. Burada "LEFT" ya da "RIGHT" kullanabilirsiniz.

1.3.16 LI Komutu
Liste oluşturulmasını sağlar.

1.3.17 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üğü ...

COLOR Yazı rengi ...

FACE Yazı türü ...

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

<title> html öğreniyorum </title>

<center>BU BİZİM SAYFAMIZ

<BODY BACKGROUND="C:\webtas\resim\star.jpg"

TEXT="white" LINK="yellow" VLINK="cyan"

ALINK="red">

<div align><img src="c:\webtas\resim\sahil.gif" width=500

height=300 alt="Hayat Bir Sahildir.">

<a href="http://www.gazi.edu.tr" >Universitemiz </a>

<a href="http://www.altavista.com" > Web'de Kolay Arama </a>

<a href="http://www.komik.net" > Komik Bir Site </a>

Son Güncelleme Tarihi

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>

Burada önemli olan dönmek istediğiniz html uzantılı dosyanın isminin doğru verilmesidir

__________________
[color=red]~!WebArsiv Arkadaşlik Grubu!~