Html'nin Anatomisi...

Seçenekler

Yazdır

Forumu kullanmak için üye olun

Arama

Gelismis Arama Yap

Konu: Html'nin Anatomisi... (Okunma Sayısı 208 defa)

Seçenekler

Arama

« : 17 Nisan 2008, 23:05:00 »

thebanned

Azimli Üye

Üye No : 3

Yas : 18

Cinsiyet : Bay

Webmaster Destek Bagımlılık Yaratan Forum!ADMİNCLUP... Nerden : Cizre/Osmancık

Konu : 78 Mesaj Sayısı: 142

Puan: 0

Dişi Düşmanı

Html'nin Anatomisi...

Arkadaşlar başlıkta kesinlikle abartı yok bu döküman üzerinde çoktandır çalışıyorum aslında çok karmaşıktı önce bi dzene koydum eklemeler yaptım kendimde çalıştım bu arada Kahkaha

Gerçekten Html öğrenmek İsteyen arkadaşlar.Bu dökümanı dikkate almalı...!

Alıntı

<html>{html program başlangıç komutu.}

<head>{bu alanda yazılan yazılar web sayfamızda görüntülenmez anahtar kelimler sayfa içerisinde tanımlamalar sayfa içerisinde Kullanılan karakter bilgisi(dil code page)Gibi sayfanın kendisine ilişkin doğrudan tanımlamalar yapılır.}

</head>

<body>{Sayfa üzerinde görüntülenmesi istenen herşey buraya yazılır.Sayfanın başlangıç ve Bitiş Bloğu gibidir.}

</html>html programlamamının bitiiği komutudur.

}

<head>..........</head>arasında kullanılan Komutlar:

<title>..........</title>Belirteç Çifti:bu belirteç çifti arasına broswerin'yn listeleyici başlık çubuğunda görülecek olan başlık yazılır.

<META> belirteci: Bu belirteç ile kullanylabilen birçok seçenek vardyr. Örne?in bir kullanymy, bu belirteç ile sayfanyzyn içeri?ini yansytan bazy anahtar kelimeler ve tanymlamalar verilmesidir. Web üzerinde arama yapan arama motorlary sayfalaryn meta belirteçlerine bakarak gruplandyrma yaparlar. Bununla ilgili a?a?ydaki örnekleri inceleyiniz.

<META NAME="Description" CONTENT="HTML ö?renmek için yararly bilgiler">
<META NAME="Keywords" CONTENT="html, htm, web sayfasy">
<META NAME="Author" CONTENT="thebanned">

Ba?ka bir kullanym, sayfadaki yazylaryn hangi dil ailesine ait karakterlerle yazyldy?yny belirtmek içindir. Yine a?a?yda bunula ilgili bir örnek verilmi?tir.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8858-9"> (Türkçe' nin dahil oldu?u dil ailesine ait standard tanymlamasy iso-8859-9' dur.)

<BODY> .......... </BODY> Arasynda Kullanylan Komutlar :

Her türlü yazy, formatlama bilgileri bu bölüme girdi?inden, bir HTML dökümanynyn esas kysmyny da bu bölüm olu?turdu?undan, bu bölümde oldukça fazla sayyda komuttan söz edilecektir. Bu komutlar belirli bir mantyk syrasyna göre verilecektir.

<BODY BGCOLOR=& TEXT=& LINK=& ALINK=& VLINK=&>

RRGGBB ile temsil edilen hexadecimal bir sayydyr. (R= Red, G= Green, B= Blue) Bu yöntem kullanylarak de?i?ik renkler elde edilebilir. Pek tercih edilmemekle birlikte sayy yerine do?rudan renk isimleri de verilebilir (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ). Bgcolor seçene?i, sayfanyn zemininin, text, sayfa içindeki yazylaryn, link, ba?lanty yazylarynyn, alink, aktif durumdaki ba?lanty yazylarynyn, vlink, ziyaret edilmi? ba?lantylaryn renklerini vermemiz için kullanylyr.

Sayfanyn zemin rengini tek renk vermek yerine, fona bir background resmi de koyabiliriz.

<BODY BACKGROUND=�image_URL�>

Sayfa kenarlary ayarlamalary da a?a?ydaki ?ekilde yapylyr:

<BODY LEFTMARGIN=& TOPMARGIN=&>

& marjin miktaryny temsil etmektedir. Leftmarjin seçene?i sol kenary, Topmarjin üst kenary ayarlamamyzy sa?lar.Bir döküman içerisindeki yazylardan istedi?imiz kysmynyn font özelliklerini belirlemek için font belirteci de?i?ik seçeneklerle kullanylyr:

 Font büyüklü?ü belirlenecek yazy 

1� den 7� ye kadar de?i?ebilir. Sayyyy artyrdykça, belirteç çifti arasyna yazdy?ymyz yazynyn büyüklü?ü de artar.

 Font rengi belirlenecek yazy 

& yerine yine alty basamakly hexadecimal sayylar kullanarak ya da do?rudan renk ismini vererek, ayarlamamyzy yaparyz.

 Karakter ?ekli belirlenecek yazy 

& yerine istedi?imiz karakter tiplerinden birini yazabiliriz. (Örne?in; Times New Roman, Arial gibi�)

Döküman içindeki yazylardan istedi?imiz bir kysmyna kalyn, italik, alty çizgili vb özellikleri verebiliriz:

 Kalın yapılacak yazı 
 Italik yapılacak yazı 
 Alty çizili yapylacak yaz 
 Satyryn biraz üst tarafynda görünmesini istedi?imiz yazy 
 Satyryn biraz alt tarafynda görünmesini istedi?imiz yazy 
<STRIKE> Üstü çizili yapylacak yazy </STRIKE>

html sayfamda paragraf başlığı yapmak için,sadece alt satıra geçmek için yada bir kısım yazıyı tek bir satıra yazmak için,aşağıdaki belirteçleri kullanmlıyız



Yeni bir paragraf yapmak istedişimiz zaman kullandışımız bu belirteç, çiftiyle birlikte kullanılmaz. Okunabilirlişi artırmak için, genelde satırın sonunda kullanılır. Bir satır boşluk bırakır.

 

bir alt satıra geçmek için kullanılan bu belirtecinde çifti yoktur.bu belirteç bir satır boşluk bırakmadan bir alt satıra geçer

hep aynı satırda yazmasını istediğiniz yazılar
bu belir çiftiyle birlikte kullanılır.belirteç çifti arasına yazdığımız yazılar aynı satırda görüntülenir.

Döküman içinde kullanacağımız başlık formatlarını ayarlamak için kullanacaşımız belirteç ise aşağıda gösterilmiştir:

<h&>başlık<h&>

bu belirteç çifti arasında kullanacağımız başlıkları yazarız.&1,den 6 'ya kadar bir satır temsil eder.satır büyüdükçe başlığın ebatıda küçülür.

Başlışı sağa, sola yaslamak ya da sayfanın tam ortasında bulunmasını saşlamak için <H&> belirteci ALIGN seçeneğiyle kullanılır.

<H& ALIGN=#> Sağa, sola ya da ortada yaslayacağımız başlık </H>

& yerine 1� den 6� ıa kadar bir sayı, # yerine de left, right ya da center gelmelidir.

Bir paragrafı olduğu gibi sağa, sola ya da ortada yaslamak istedimiz zaman da belirtecini çiftiyle beraber benzer şekilde ALIGN seçeneşi ile kullanmalııız.

 Sağa, sola ya da ortada yaslayacaşımız paragraf 

# = left, right ya da center

Hazırladığım dökümanda kullanmak istediğimiz özel karakter stilleri olabilir.Örneğin bir yerden alıntı yapmak istedişimizde, alıntı yaptığımız yazıların biraz eğik (italik gibi) görünmesini isteıebiliriz. Ia da bazı vurguladışımız kısımların daha çok göze çarpmasını isteğebiliriz. HTML� de bu gibi özellikleri sağlayan belirteçler de vardır. Aşağıda bunlar verilecektir:

 Önemli bir yazı {Bu belirteç

vurguyu belirtmek için kullanılır. (Dışarıya biraz

eğik çıkar.) }

 Çok önemli bir yazı {Bu

belirteç çifti güçlü vurguyu belirtir. (Dışarııa

biraz koyu çıkar.) }

<CODE> yazılar yazılar </CODE> {Bu belirteç

çifti yasa, kural belirten yazılar için kullanılır. }

<SAMP> Örnek </SAMP> { Örnek çıktı }

<VAR> Değişken, emin değil </VAR>

{Deşişken, kararsız }

<DFN> Tanımlama </DFN> {Bu belirteç çifti

tanımlama belirten yazılar için kullanılır.

(Dışarıya hafif eşik çıkar.)}

<CITE> Alıntı </CITE> {Bu belirteç çifti alıntı

yazılar için kullanılır. }

 Küçük yazı {Bu belirteç

çifti arasında yazılan yazılar dışarıya çok küçük

çıkar. }

<BIG> Büyük yazı </BIG> {Bu belirteç çifti

arasında yazılan yazılar dışarı ya çok büyük

çıkar. }

<ADDRESS> yazarın Adresi </ADDRESS> {Bu

format yazarın adresini yazmak içindir. }

<BLOCKQUOTE> Içeriden başla

</BLOCKQUOTE> {Bu belirteç çifti arasına

yazılan yazı sayfanın hem sağından hem

solundan içeriye kayar. }

<DIV ALIGN=LEFT|CENTER|RIGHT> Herhangi bir

yazı ya da yazı grubu </DIV> {Bu belirteç çifti

herhangi bir yazı ya da yazı grubunun sağa, sola

ya da ortada yaslanmasını sağlar. }

<CENTER> Ortalanacak yazı </CENTER> {Bu

belirteç çifti yazı ve resimleri sayfada ortalar . }

<PRE> Formatlı metin </PRE> {Bu belirteçler

arasına yazılan her şey, yazıldığı gibi ekrana

çıkar. Boşluklar, tab' lar, satır bölmeleri vb

korunur. }

<BLINK> yanıp sönen yazı </BLINK> {Bu

belirteç çifti arasına yazılan yazılar dışarı

çıktıklarında bir yanıp bir sönen şekilde

görünürler. }

Sayfamızda herhangi bir yere değişik

boyutlarda çizgi çizmek isteyebiliriz. Bunu

<HR> belirteciyle yaparız. Boyutlarını

ayarladığımız seçenekleriyle birlikte kullanımı

aşağıdaki gibidir.

<HR SIZE=# WIDTH=# ALIGN=#> {Çizginin

uzunluğunu ayarlamak için kullandığımız WIDTH

seçeneğini WIDTH=50% şeklinde de

kullanabiliriz. Örneğin; bizim kullanımımız

sayfanın %50� si, yani yarısı uzunluğunda bir

çizgi çizmek istediğimizi belirtir. }

Sayfamızdan yapacağımız başlantılara

gelince; öncelikle Internet üzerindeki herhangi

bir makinadaki bir dökümana başlantı yapmaya

bakalım:

<A HREF=�URL_adresi�> Buraya tıklayınız

</A> {Web saıfanızda �Buraya tıklağınız�

yazısı çıkacaktır ve bu yazı bir link görünümünü

almıştır. Üzerine tıkladışınızda yazdığınız URL

adresine ulaşırsınız. URL adresi aşaşıdaki

gibidir. }

<servis>://<adres>[:port_numarası]/<dizin>/

dosya_adı

<servis> yerine webin dışında diğer internet

servislerini sağlayan prottokolleri de

yazabilirsiniz. Eğer, bulunduğunuz dizinde bir

dökümana başlantı yapmak istiyorsanız, sadece

dökümanın adını ıazmanız ıeterlidir. Kendi

makinanızda fakat başka bir dizin altındaki bir

dökümana başlantı yapmak için, dizin ismini ve

döküman ismini yazmalısınız.

<A HREF=�fotograflarim\uzgun.gif�> buraya

tıklayınız </A>

Aynı dökümanın içinde bir yere bağlantı

yapmak istiyorsak o zaman şöyle demeliyiz:

<A HREF=�#name�> buraya tıklayınız </A>

Gitmek istedişiniz yerin HTML kodunu ise şöyle

yazmalısınız:

<A NAME=�name�></A> Buraya hoşgeldiniz.

�name� burada sizin tespit edeceğiniz

herhangi bir isim olabilir. (Örneşin 1. Bölüme

gitmek istiyorsanız, name yerine 1, aynı şekilde

1. Bölümün bulunduğu yere de name olarak 1

yazmalısınız.)

Başka bir dökümanın bir parçasına gitmek

istiıorsanız, <A HREF=�URL#name�> hedef

</A> yazmalısınız. Tabii gideceğiniz döküman

parçasının başında da <A NAME=�name�></A>

yazmalıdır.

HTML dökümanınız içinde bir resim dosyasını

da bağlantı elemanı olarak kullanabilirsiniz.

Örneğin;

Bana mail göndermek için zarfın üzerini

tıklayın<A

HREF=mailto:hizmet@thebanned.org><IMG

SRC="envelope.gif"> </A>

Bu dışarıya şöyle çıkar:

Bana mail göndermek için zarfın üzerini tıklayın

ZARF RESMI

Eşer başlantı yapılacak olan, bir dosyaysa, o

dosyanın türü önemlidir. Dosyanın türü, Web

sunucusu ve sizin Web istemciniz tarafından

bilinen bir dosya türüyse (TXT, GIF, JPG, JPEG,

PNG, XBM) başlantı yazısının üzerine

tıkladışınızda dosya açılır. Eğer ilgili dosya

bilinmeyen bir dosya türüyse, o zaman bu

bağlantı tıklandışında, web istemcisi o dosyaıı

"diske saklamak" ya da bir uygulama programıyla açmak şeklinde iki seçenek sunar. Bazı dosya tipleri ise, web istemcilerine yüklenen yardımcı "plug-in" ler ile işlenebilir. Bunlardan en popülerleri ses formatları (AU, WAV, MID); video formatları (RM, MOV, AVI) ve bazı özel tipte dosyalardır (AutoCAD çizim dosyaları gibi). Kayan yazı görüntüsü elde edebilmek için kullanılacak olan belirteç çifti
...
�dir.
Kayan yazı
{Bu belirteçler arasındaki yazı dışarıya kayan şekilde çıkar} Bu belirteç çiftinin beraber kullanıldığı seçenekler aşağıda verilmiştir:
Kayan yazı
# burada kayma hızını belirten bir sayıdır.
Kayan yazı
Scrolldelay seçeneği yazının hangi aralıklarla bekletileceğini belirten bir sayıdır. Kayan yazının büyüklüğünü, genişliğini ayarlayabiliriz. Align seçeneği ise, top, middle ve bottom deşerlerini alabilir.
Kayan yazı
Merhaba! Kayan yazının arkaplan rengini bgcolor seçeneği ile aşağıdaki gibi verebiliriz.
Kayan yazı
ANLAMLARINI ANLAyAMADIM� Listeler de incelenmesi gereken önemli bir konudur. Listeleri dört grupta inceleyebiliriz. 1- Sırasız (Unordered) Listeler: Bir seçenek belirtilmezse, siyah noktalı listeler oluşturur.

* Win 98
* Win NT

Fakat, siyah nokta yerine, içi boş daire ya da kare şekli çıkarmak ta mümkündür. Bunun için kullanılması gerekli seçenek TIPE seçeneğidir. TIPE seçeneğinin alabileceği değerler disc, circle ve square� dir. 2- Sıralı (Ordered) Listeler: Bir seçenek belirtilmezse, 1, 2, 3 � numaralı listeler oluşturur.

1. Win 98
2. Win NT

# Burada da type seçeneğini kullanarak değişik sıralı listeler yaratmak mümkün olur. # = A, a, I, i, 1 3-Açıklamalı Listeler:

Win98
Bir işletim sistemidir.
WinNT
Arayüzü Windows 95� e çok benzeyen bir işletim sistemidir.

4-Içiçe Listeler: Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak;

* Izmir� deki üniversiteler
o Ege Üniversitesi
o Dokuz Eılül Üniversitesi
* Ankara' nın belli başlı üniversiteleri
o ODTÜ
o Hacettepe

Ekrandaki görüntüsü, �Izmir� deki üniversiteler �Ege Üniversitesi �Dokuz Eylül Üniversitesi �Ankara'nın belli başlı üniversiteleri �ODTÜ �Hacettepe HTML'de Kullanılan Teknolojiler 1. JAVA Java, Sun Microsystems firması tarafından 1991 yılında geliştirilmiş nesneye yönelik bir programlama dilidir. Java, temel veri tiplerini, giriş çıkış fonksiyonlarını ve diğer fonksiyonları içeren sınıf kütüphanesine sahiptir. Bu programlama dili aynı zamanda internet protokollerinin çoğunu destekleyen fonksiyonlara da sahiptir. Java çok fazla komut içermemesine rağmen, uygun komutları bünıesinde barındırdığı için, güçlü bir dil olarak kabul edilmiştir. Java programlama dili, geliştirilirken C ve C++ dillerini kendine baz almıştır. Java ile yazılan bir programın çalıştırılabilmesi için, iki aşamadan geçirilmesi gerekmektedir. Birinci aşama programın derlenmesi aşamasıdır. Programın Java derleyicisi ile derlenmesi sonucunda, bıte kod (Java binarı kod) denilen makina koduna yakın, fakat işlemciye özel olmayan kod oluşturulur. İkinci aşama ise, programın bıte kodunun bir byte kod yorumlayıcısından geçirilmesi aşamasıdır. Bıte kod yorumlayıcısı programın çalışmasını sağlar. Java� nın bu özellii ona hem avantaj hem dezavantaj getirir. Derlendikten sonra işlemciye özel kod üretilmemesi sayesinde Java sistemden bağımsızdır, üzerinde Java yorumlayıcısı bulunduran herhangi bir sistemde çalışır. Fakat, bir Java yorumlayıcı programı yürüttüğü için, işletim hızı da yavaşlar. Java� da program yazabilmek için bir Java Geliştirme Kiti (JDK) gereklidir. Herhangi bir editörde (Unix için pine, vi; DOS altında MSDOS Edit vb�) yazılıp, *.java uzantılı kaydedilen Java programı dosyası, JDK� de komut satırına javac dosya_ismi yazılıp derlenir. Bu işlem sonucunda dosya_ismi .class dosyası oluşur. (Bıte kod dosyası) JDK� den java yorumlayıcısı çağırılarak, programın çalıştırılması istenirse, komut satırına java dosya_ismi yazılır. Java dili ile yazılan programları, Java uygulamaları ve Java appletleri olmak üzere iki ana grupta toplayabiliriz. Java uygulaması, herhangi bir probleme çözüm getirmek amacyıla, Java dili ile yazılmış bir programdır. Örneğin; ekrana �Ben Java öğreniyorum!� çıktısını veren bir program yazalım: Class JavaOgreniyorum { public static void main(String args[]){ Sıstem.out.printIn(�Ben Java öğreniıorum!�); } } Bu programı bir editörde yazıp, genelde sınıfa verdiğimiz isi dosya ismine de verip, kodu JavaOgreniyorum.java olarak kaydederiz. Daha sonra yukarıda açıklandığı gibi, JDK� de derlemek için komut satırına javac JavaOgreniyorum yazıp, JavaOgreniyorum.class dosyasının oluşmasını sağlarız. Programın çalışması için de java JavaOgreniyorum komut satırını yazarız. Java appleti ise, Java desteğine sahip bir listeleyicide (browserda) görüntülenen Web sayfaları içerisinden çalıştırılabilen programlardır. Bir Java appleti imajlara benzer, fakat, dinamik ve interaktif olmasyıla farklılaşır. Bir Web saıfasına java appleti bağlamak için, önce Java dili ile program yazılıp derlenir. Sonra HTML ile hazırlanmış Web sayfasında bu dosya referans olarak gösterilir. HTML dosyası ile applet dosyasının aynı dizinde olması tavsiye edilir. (bir HTML dosyası ile o sayfada kullanılan imaj dosyası gibi) Web sayfası yüklendiğinde Web listeleyicisinde (browserında) gömülü olan Java yorumlayıcısı sayfadaki appletleri çalıştırmaya başlar. Appletlerin Web sayfasında çalışması için, kullanılan listeleyicinin Java desteğine sahip olması gerekmektedir. Bu amaçla geliştirilen ilk listeleyici (browser), HotJava olup (HotJava Java dili ile yazılmıştır.), daha sonra diğer Web listeleyecilerinin de Java� yı destekleyen yeni sürümleri çıkartılmıştır. (Örneğin, Netscape 2.0 gibi) Şimdi deminkine benzer bir Java appleti yazmayı ve bunu bir Web sayfasına bağlamayı deneyelim: import java.awt.Graphics; public class JavaOgreniyorumApplet extends java.applet.Applet{ public void paint (Graphics g){ g.drawstring(�Ben Java öğreniyorum!�, 5, 25); } } Burada import komutu da applet� in JDK içindeki sınıflara erişimini sağlar. Bu applet dosyası da deminki Java programına benzer biçimde, bir editörde yazıldıktan sonra ait olduğu sınıf ismi dosya ismi olarak verilip JavaOgreniyorumApplet.java şeklinde kaydedilir. JDK� de javac JavaOgreniyorumApplet komut satırı yazılıp, programın derlenmesi sağlanır. Daha sonra oluşturulan bıte kodun çalışması için, java JavaOgreniyorumApplet komut satırı yazılır. 2. CGI (Common Gatewaı Interface) CGI� ın ne olduğunu anlatmaya geçmeden önce bazı kavramların açıklanması gerekmektedir. Buna Web Server ve Client ile başlamak yerinde olur. Web Server� lar (HTTPd Server), Web sayfalarını üzerinde bulunduran makinalardır. Bu makinalar genelde kendi üzerlerinde bulunan Web sayfalarına erişmek için 80 numaralı portu kullanırlar. Client ise, Web Server� lar üzerindeki Web sayfalarına erişmek isteyen makinalardır. Client herhangi bir porttan Web Server ile iletişim kurabilir. Stdin standard input� un kısaltılmışıdır ve server açısından client� ın server� a gönderdiği veriler anlamına gelir. Stdout standard output� un kısaltılmışıdır ve server� ın client� ın gönderdiği verileri işlemesi sonucunda client� a gönderdiği sonuç bilgisi anlamına gelir. Yukarıdaki açıklamalardan da anlaşıldığı gibi, HTTP protokolü, server� dan client� a ve client� tan server� a veri aktarımını destekler. Client� ın server� a veri gönderebilmesi, formlar aracılığıyla olur. Form, client� ın server� a veri ulaştırmasını sağlamak amacıyla HTML dili kullanarak yazılmış Web sayfalarıdır. Kullanıcının (client) form aracılığıyla server� a gönderdiği bilgiyi işleyecek server tarafında çalışan bir programa ihtiıaç vardır. Bu programa gatewaı programı denir. CGI (Common Gatewaı Interface), client� ın gönderdiği input verileri alıp, gatewaı programına veren (gatewaı programının çalışmasını sağlaıan) ve programın çıktısını tekrar client� a ileten, kısaca server ve server tarafındaki gatewaı programları arasında iletişimi sağlayan, bir arayüz, protokoldür. Bir Web Client programının (Web browser), HTTP server� ına veri göndermesini sağlamak için hazırlanan formlar, HTML diliyle aşağıdaki gibi başlar:
�.. �..
Action seçeneğinde belirtilen URL, formun doldurulduktan sonra, hangi Web server� daki hangi program tarafından işleneceği bilgisini ifade eder. Method seçeneği ise, formun Web server� ına hangi methodla ulaştırılacağını belirtir. Yukarıdan da anlaşılacağı gibi, formdaki bilgiler iki methodla ulaştırılabilir. Get metodu kullanılırsa, veri çevresel değişkenler aracılığı ile, Web Server� a ulaştırılır. Bu metodla bütün form bir querı_string değişkeninin içine konur, action kısmında belirtilen adres ve programın sonuna eklenir ve tek bir URL olarak gönderilir.