1. En önemli iki bileşen - metinler ve resimler

Bir Web sitesi yapmakla yemek yapmak arasında biçimde farklılıklar olsa bile özde hiç bir fark yoktur. Her ikisinde de malzemeler belirli şekillerde bir araya getirilir ve bütün oluşturulur.

Metinler ve resimler diğer öğelerle birlikte yan yana getirilir ve İnternet'te bir sunucu (server) üzerinden sunulur

1.1 Metin

Her ne kadar bu günlerde Web'deki sayfaları gürültü, şaşalı grafikler ve göz alıcı resimlerden oluşsa da bir Web sayfasını esas olarak başarılı yapan şey içeriktir. İçerik ise doğrudan metin demektir.

Web sayfaları için metin yazmakla normal metin yazmak arasında her hangi bir fark yoktur. Birçok gazetenin Web sayfasının içeriği gazetede çıkan yazının aynısıdır. Yani sonuçta demek istediğim düzgün yazın. İlgi çekici ve düzgün bir metnin nasıl yazılacağı doğal olarak bu dersin değil edebiyatın konusudur. Sadece bir kaç öneride bulunacağım;

Gerçekten can-ı gönülden ilgilendiğiniz konularda yazın: Sizin ilgilenmediğiniz bir konu hakkında yazdığınız yazı büyük bir ihtimalle okuyucularınızı da sıkacaktır (eğer hayatını yazarak kazanan bir yazar değilseniz tabi).

İstek ve şevkle yazın: Eğer Formula 1 yarışları için deli oluyorsanız ve hiç bir yarışı kaçırmıyorsanız bu konuda yazacak çok şeyiniz var demektir. Bir konuyla ne kadar çok ilgiliyseniz, o konu hakkında o kadar çok ilgi çekici yazı yazma ihtimaliniz vardır. Formula 1 konusu ile ilgilenen bir kişinin bonzai çiçek yetiştirmesiyle ilgili bir yazısı doğal olarak kuru ve ilgi çekici olmaktan uzak olacaktır.

Kendiniz olun: Yazdığınız ne olursa olsun her zaman kendiniz olarak yazın. Bir kişisel Web sayfasının içeriği de zaten bu şekilde olmalıdır. Günlük konuşma dilini bile kullanabilirsiniz, tabi argoya kaçmadan.

Gramer ve yazım hatalarına karşı dikkatli olun: Bir metni ekran üzerinden okumak zaten oldukça zahmetli bir iştir. Bir de bozuk gramer ve imla hatalarıyla yüklü bir metni okumak okuyucunuzu sıkacaktır ve Web sitenizden kaçmasına yol açacaktır. İngilizce metinler için hazırlanmış birçok gramer ve imla kılavuzu vardır fakat Türkçe metinler için çok fazla seçeneğiniz yok. Microsoft Word programının Türkçe sürümünde gramer ve imla kılavuzu bulunmaktadır. Office 2000 programı yazım hatalarını düzeltmektedir. Zorlandığınız durumlarda babadan kalma imla kılavuzunu kullanabilirsiniz. Tamamı büyük harfle olacak şekilde yazmayın çünkü hem okunması zor olur hem de büyük harflerle yazmak sanal alemde BAĞIRMAK olarak algılanır.

Çok fazla metin biçimlendirme özelliği (font, büyüklük vs.) kullanmamaya özen gösterin: Çok fazla font okunmayı güçleştirir sadece. Belirli metin ve başlıklar için belirli font ve büyüklük kullanın. Bu kullandığınız özelliği tüm sitenize uygulayın.

Düzgün yazın, kısa yazın, akıcı yazın: Düzgün yazmak demek anlaşılabilir cümleler kurmak demektir. Güzel Türkçe'mizi katletmemeye özen gösterin. Çok uzun ve ağdalı cümleler yerine kısa ve öz cümleler kurun. Ekrandan okumak yeterince güçtür, bir de uzun cümleler kurup daha da güçleştirmeyin. Akıcı yazın ki okunabilesiniz.

1.2 Resim ve Grafikler

Birçok resim formatı olmasına rağmen Web sayfalarında genel olarak üç tür resim formatı kullanılır: GIF, JPEG ve PNG.

GIF: GIF türü resimler 256 kadar rengi tanımlayabileceğiniz resim dosyalarıdır. Elinizde 256 tane boya olan bir palet ile resim yaptığınızı düşünün. Daha fazla sayıda renk tanımlamak için ister istemez JPEG resim formatına başvurmanız gerekir. GIF formatındaki resimler; düğmeler, oklar ya da işaretler gibi fotografik olmayan öğelerde kullanılır. GIF resim formatının JPEG formatından daha ufak yer tuttuğunu söylememe gerek yok sanırım. GIF resminin bir başka özelliği ise, resimde yer alan renklerden birini transparan (yani şeffaf) hale getirebilirsiniz, yani herhangi bir fonda bu renkler görünmeyeceklerdir. Böylece sayfalarınızda üç boyutlu bir etki yaratmak mümkündür.

JPEG: JPEG resim formatı fotoğraflar için idealdir çünkü bunlar 16 milyona yakın renge sahip bir renk paletine sahiptir. JPEG formatı doğal olarak daha çok yer kaplar. Yani bir resmi JPEG olarak kaydederseniz GIF resmine göre daha büyük bir dosya olacaktır, bu ise resmin yüklenmesinin gecikmesi demektir. Bir Web sayfasına baktığınızda o sayfanın bulunduğu sunucu size html dosyalarının yanı sıra resimleri ve grafikleri de gönderir. Eğer sayfanızda çok büyük resimler varsa bu gönderme işlemi yani sayfanın yüklenmesi oldukça vakit alacaktır. İnternet kullanıcısı çok şımarık ve sabırsızdır. 10 saniyeden fazla beklemez. O halde kullanıcıyı bekletmeyin.

İçerik açısından çok kaliteli olan fakat yüklenmesi saatler sürdüğü için çok az kişi tarafından bakılan pek çok sayfa gördüm. Pamuk Prenses gibi görülmeyen bir güzel olmak yerine taliplileri olan bir mahalle kızı olmak daha iyidir. Resmin kalitesi ve yükleme hızı arasında bir optimizasyona gitmeniz gerekir. Basit olarak resim boyutunun 40 KB'ı geçmeyecek şekilde hazırlayın ya da taratın. Sayfa boyutu da 150 KB'ı geçmesin fakat bu kesin bir kural değildir.

Her şey iyi hoş da Web sayfamıza koymak için resimleri nereden bulacağız?

Tarayın!

Kendinizin, ailenizin ya da kedinizin resmini bir tarayıcıda (scanner) taratıp bu dosyayı JPEG formatında kaydedebilirsiniz. Bir tarayıcınız yoksa her yerde pıtırak gibi açan İnternet kafelerden birine gidin ve resminizi taratıp bir diske kaydettirin (kedim.jpg) ya da tarayıcısı olan bir arkadaşınıza rica edin. Bu iş için bir tarayıcı almaya kalkmayın (en ucuzu 100 dolar) Bir scanner'da taradığınız metnin çözünürlüğünün (resolution) çok olmamasına dikkat edin. Çözünürlük nedir? Bir resim bilgisayarda bir mozaik gibi piksel dediğimiz noktalarla oluşturulur. Birim alana düşen piksel sayısı arttıkça resim daha kaliteli görünecektir ve boyutu da fazlalaşacaktır. Bunun ölçütü dpi birimidir (dots per inch: inç başına düşen nokta sayısı). Kalite ve resim boyutu arasında bir optimizasyon yapmanız gerekir aksi takdirde sayfalarınızın yüklenmesi çok ama çok vakit alır.

Aynı resmin değişik çözünürlüklerdeki dosyal boyları.

• Düşük çözünürlük 5.6 KB (72 dpi)
• Orta çözünürlük 8.35 KB (150 dpi)
• Yüksek çözünürlük 25.4 KB (300 dpi)

Resminizin büyüklüğünün 40 yada 50 KB'ı geçmemesine özen gösterin, yine de bunun bir kural ya da zorunluluk değil de bir tavsiye olduğunu unutmayın.

Piyasada birçok clip-art yani grafikler (oklar, insan resimleri, düğmeler vs. vs.) CD'ler içinde ayrı olarak ya da dergilerle birlikte gelmektedir. Bu resimlerin hemen hepsi ücretsizdir ve ayrıca bir telif ücreti ödemenize gerek yoktur. Birçok clip-art gallery CD'si oldukça zengin bir içeriğe sahiptir. Bu CD'leri sokaktan almak yerine dergilerin ekleriyle gelenleri tercih etmeye çalışın. Bunlar arasında beğendiklerinizi daha önce oluşturduğumuz klasöre kopyalayın.

Dilerseniz web sihirbazi ile size hediye gelen 1 GB lık 1000 lerce resimden oluşan arşivi de kullanabilirsiniz.

İnternet'ten Yükleyin...

İnternet'te milyonlarca resim, grafik vardır. Eğer İnternet'e bağlanıyorsanız ve bir sayfaya bakıyorsanız beğendiğiniz resimleri bilgisayarınıza kolaylıkla aktarıp daha sonra bunları kullanabilirsiniz. Tabi böyle bir şey yapmadan önce telif hakları ve izin konularına dikkat edin. Her resmi ya da öğeyi bilgisayarınızda görebilirsiniz fakat bu, izinsiz ya da telif hakkı olmadan kullanabilirsiniz anlamına gelmez.

Internet Explorer programında Web sitelerine bakıyorsanız beğendiğiniz bir resmin üzerine fare ile gelin ve sağ fare tuşunu tıklayın. Karşınıza aşağıdaki menü gelecektir. Bu menüden Resmi Farklı Kaydet (Save Image As) seçeneğini tıklayın. Daha sonra dosya kaydetme iletişim kutusuna dosya için bir isim girin ve kaydedeceğiniz yeri belirleyin. Doğal olarak bu yer Web sitenizin bulunduğu dizinin altındaki /resimler ya da /images dizini olmalıdır. İsim girmezseniz dosyanın İnternet'teki adıyla kaydedilecektir.

Bir Grafik Programında Siz Yapın

Adobe Photoshop, CorelDRAW ya da buna benzer bir grafik programında kendiniz resim oluşturabilirsiniz. En basitinden Windows ile gelen Paintbrush programında bile kendiniz bir şeyler yapabilirsiniz. Yapmanız gereken grafiği kaydederken dosyayı JPEG ya da GIF formatında kaydetmektir.

Dikkat etmeniz gereken tek nokta, resimleri bitmap yani .bmp formatında değil de .gif ya da .jpeg formatında kaydetmenizdir. Çünkü bitmap formatı çok ama çok yer kaplar. Mümkünse bu formattaki bir resmi Web sayfanıza koymayın. Şöyle bir örnek vereyim aynı resim kalitesinde bir JPEG resmi 40 KB yer tutarken bitmap yani .bmp tipindeki resim en azından 1.000 KB (yani yaklaşık 1 MB) yer tutacaktır. Yüklenmesi tam bir işkence olur tabii ki.

Not: Web sitenizi yaparken resimleri ayrı bir dizin altında bulundurmanız çalışmanız ve daha sonra düzenleme yapmanız için size kolaylık sağlayacaktır. Bunun için bir resimler dizini oluşturun. Aynı şekilde düğmeler içinde ayrı bir dizin açıp sitenizde kullandığınız tüm düğmeleri buraya ekleyebilirsiniz. Mümkün olduğunca bir dizin altına çok dosya eklemeye özen gösterin yoksa birçok dosya arasında kaybolabilirsiniz.

 2. Sitemizi İnşa Edelim!

Web sitemizi oluşturmak için gerekli olan malzemelerimizi inceledikten sonra şimdi bu malzemelerle nasıl bir Web sitesi yapacağımızı görelim.

2.1. HTML Ne Demek?

HTML yani HiperText Markup Language (eyç ti em el olarak okunur) (Hipermetin İşaretleme Dili) aslında bildiğiniz anlamda klasik bir bilgisayar dili değildir. Bir bilgisayarın dilinden daha çok bir belgenin sizin bilgisayarınızda nasıl yeniden oluşturulacağını anlatan bir işaretleme dilidir.

Bir Web sayfası aslında bir Web tarayıcının o sayfayı nasıl göstereceğini belirten komutlardan oluşur. Internet Explorer ya da Firefox gibi Web tarayıcı bu komutları yani HTML etiketlerini yorumlayarak Web sayfasını ekranınızda oluşturur. Bu bağlamda, bir Web sayfasının HTML kodu Web tarayıcının sayfayı nasıl oluşturacağını anlatan bir yönerge listesidir. Web tarayıcınıza bir sayfayı sizin bilgisayarında nasıl oluşturulacağı anlatılır;

Bir Web tarayıcıyla bir Web sayfasına baktığınızda herhangi bir HTML etiketi görmezsiniz. Dosyanın HTML kodunu görmek istiyorsanız sağ mouse tuşu ile kaynak kodu göster (view soruce) a tıklamanız gerekir.

·         HTML dilinde bir Web sayfası yazmadan önce öncelikle bilmeniz gereken bu dilin case-insensitive (BÜYÜK/küçük harf duyarsız) olduğudur. Ne demek şimdi bu? Yani HTML dilinde bir komut ya da etiketi büyük harf ya da küçük harfle yazabilirsiniz, <head> veya <HEAD> etiketlerinin ikisi de kabul edilir fakat yine de dosya üzerinde sonradan değişiklik yapmak ya da bir hatayı bulurken kolaylık olsun diye siz etiketleri büyük harfle yazmaya özen gösterin fakat yine de, bunun bir zorunluluk olmadığını bilin. Yani; <head> = <HEAD>

• HTML dili bilgisayar platformlarından bağımsızdır. Bir başka deyişle hazırladığınız Web sayfası tüm bilgisayarlarda görüntülenecektir. Bilgisayarın IBM uyumlu ya da Macintosh olması Web sayfasının görüntülenmesinde etkili olmayacaktır.Normal bir editör programında (örneğin Microsoft Word) Enter tuşuna bastığınızda yeni bir satır açılır ve imleç bir alt satıra kayar. Hayat her zaman böyle kolay olsa keşke. HTML dilinde yazdığınız kodun içinde Enter tuşuna basarak bir alt satıra kayabilirsiniz fakat HTML dili bunu umursamayacaktır. Aynı şekilde HTML dili Tab tuşunu, bir satır içinde art arda gelen iki boşluğu göz ardı edecektir. Peki bir Web sayfası içinde nasıl alt satıra geçiliyor ya da boşluk bırakılıyor diye sorduğunuzu duyar gibi oluyorum. Bunun için HTML diline onun anlayacağı dilden bir alt satıra geçmesini söylemeniz gerekir. Bunun için özel etiketler komutlar kullanacağız. Bir alt satıra geçmek için örneğin <p> ya da <br> etiketlerini (tag) kullanacağız.

Şimdi HTML dilinin temel yapı taşı olan etiketleri inceleyelim.

2.2. Etiketler

HTML komutlarına etiket (tag) adı verilir. Birçok etiket çiftler halinde bulunurlar; etiketin etkin olduğunu belirten başlangıç kısmı ve etiketin etkinliğinin bittiğini belirten kapama kısmı. Word Perfect ya da Word Star gibi eski kelime işlemcilerle çalıştıysanız bu tür işaretlemeyi biliyorsunuzdur. Örneğin bir metin içinde herhangi bir kısmı vurgulamak için koyu yazmak istiyorsanız vurgulamak istediğiniz kelimeyi bu etiketler arasına almanız gerekir. 

<B> Vurgu</B>

Web tarayıcınız bu kodu okuduğunda vurgukelimesini koyu yazacağını anlar. Bütün etiketler, normal metni etiketten ayırmak için < > karakterleri arasında yer alır. Yukarıdaki örnekte vurgu kelimesi kalın olarak yazılacaktır. <B> ve </B> etiketleri Web tarayıcıya bu iki etiket arasında kalan kelimenin koyu yazılmasını söyler. Etiketin etkinliğini bittiğini göstermek için bir / karakteri kullanılır.

Bazı etiketlerinözellikleri (attributes) vardır. Örneğin link koymak üzere eklediğimiz etiket olan <A> etiketinin href diye bir özelliği vardır. Etiketin işlevini tam olarak yapması için gerekli değişkenleri tanımlamak için kullanılır.

<A HREF="ust.htm"> Link metni </A>

Tablo 2.1: Temel HTML Etiketleri Listesi

<HTML> .... </HTML>	Web tarayıcıya sayfanın HTML dilinde yazıldığını gösterir. Tüm Web sayfası bu iki etiketin arasında yer alır.
<HEAD> .... </HEAD>	Bütün HTML dokümanlarında, HTML etiketinin hemen altında yer alır. Web sayfası hakkında bilgi içerir fakat Web sayfasında görünmez.
<TITLE> .... </TITLE>	Web sayfasının başlığını tanımlar. Bu iki etiket arasında yer alan başlık (Web sayfasında değil) Web tarayıcısının başlık çubuğunda görünür.
<BODY>... < /BODY>	Web sayfasını oluşturan tüm metinleri ve resimleri, aynı zamanda da format öğelerini içerir. §BGCOLOR (Background color: arka fon rengi kelimesinin kısaltılmışıdır): Web sayfasının arka plan fon rengini belirler.   §BACKGROUND (duvar kağıdı olarak kullanılacak bir resmi tanımlamak için kullanılır)
<H1> --- <H6> .... </H1> --- </H6>	Metni başlık (heading) olarak gösterilmesini sağlar. <H1> en büyüğü, <H6> ise en küçüğüdür.
<CENTER> </CENTER>	Sayfada bulunan metin ve diğer öğeleri ortalar.
<BR>	Yeni bir satıra geçilmesini sağlar (satırlar arasında yatay boşluk bulunmaz)
<P>	Paragraf başı yapar (iki paragraf arasında boşluk bırakır)
<I> </I>	Metni italik yapar.
<B> </B>	Metni kalın yapar.
<EM> </EM>	Metni vurgulu hale getirir, genellikle bu vurgu italik yapmakla da sağlanır.
<STRONG> </STRONG>	Metni iyice vurgulu hale getirir, bu vurgu kalın yapmakla sağlanır.
<A> </A>	Bir metin parçasını link olarak eklemek için kullanılır. Bu etiketle birlikte HREFveya NAME özellikleri de kullanılmalıdır §HREF <A> etiketinin özelliğidir; <A>etiketinin arasında kalan metni ya da resmi hipermetin haline dönüştürür   §NAME kalan metni ya da resmi hipermetinin hedefi yapar.
<UL> </UL>	Sıralı olmayan bir liste yapar (unordered list)
<OL> </OL>	Sıralı bir liste yapar (sayılı liste, ordered list)
<L1>	<UL> ya da <OL> etiketleri ile birlikte kullanılır. Sayılı olan ya da olmayan bir listede bir liste öğesini belirtir
<DL> </DL>	Bir tanımlama listesi (definition list)
<DT>	<DL> etiketi ile birlikte kullanılır. Bir tanımlama listesinde bir tanımlama başlığını gösterir.
<DD>	<DL> etiketi ile birlikte kullanılır. Bir tanımlama listesinde tanımlama açıklamasını belirtir.
<IMG>	Bir sayfaya resim ekler. Bu etiketle birlikte SRC özelliğini kullanmanız gerekir ?SRC resim dosyasının yerini belirtmek için kullanılır   ?WIDTH eklenen resmin piksel olarak genişliğini tanımlar ?HEIGHT resmin piksel olarak yüksekliğini tanımlar

Her Web sayfasının HTML kaynak kodunda bulunması zorunlu etiketler vardır. Bir Web sayfasında hiç bir metin ya da resim bulunmasa bile bu etiketlerin olması gerekir.

<HTML>

<HEAD>
<TITLE>Sayfa başlığı</TITLE>

</HEAD>

<BODY>

Sayfa metni ve resimleri

</BODY>
</HTML>

<TITLE> ve </TITLE> etiketleri arasında kalan kısma yazılanlar Web tarayıcınızın üst kısmında görünür.

2.3. Ama Benim Bir HTML Editörüm Yok ki...

Siz farkında olmasanız da aslında bir tane HTML editörünüz var. Bu editör Not Defteri (Notepad) programıdır.

Not Defteri (Notepad) programına BaşlatØDonatılarØNot Defteri (StartØAccessoriesØNotepad) menüsünden ulaşabilirsiniz. Windows ile birlikte gelen WordPad metin editörünü de kullanabilirsiniz fakat biz sadeliği ve basitliği nedeniyle burada sadece Not Defteri programını inceleyeceğiz.

Not Defteri programının bir HTML editörü olarak en büyük avantajı basit olması, sisteminizle birlikte ücretsiz olarak verilmesi ve basit metin düzenleme işlemleri için oldukça yeterli olmasıdır. Not Defteri programını sadece HTML editörü olarak değil, aynı zamanda günlük düz yazı işlemlerinde de (örneğin mektup yazmada) rahatlıkla kullanabilirsiniz.

2.4. Not Defteri Programının Kullanılması

Not Defteri kelime işlemcisinden HTML dilinde bir Web sayfası hazırlamadan önce, Web sitenizi oluşturan tüm dosyaları koyabileceğiniz bir klasörü sabit diskinizde oluşturun Bu klasörü masaüstünde oluşturursanız dosyalara erişmek sizin için çok daha kolay olacaktır. Yalnız HTML dosyalarını değil, aynı zamanda resim, grafik ve bunları oluşturduğunuz dosyaları da (örneğin CorelDRAW'ın .cdruzantılıdosyaları ya da Photoshop'un dosyaları gibi) bu klasörün altına koyun (örneğin CorelDRAW programında bir resim dosyanız varsa onu da bu klasörün altına ekleyin). Böylece daha sonra Web sitenizi güncellediğinizde ya da değişiklik yaptığınızda her şeyi derli toplu olarak bir yerde bulmanız kolay olur.

Bir klasör yaratmak için, imleciniz masa üstünde herhangi bir yerdeyken farenin sağ tuşuna tıklayın ve karşınıza gelen menüden YeniØKlasör (NewØFolder) seçeneğini tıklayın. Bir klasör oluşturulacaktır. Klasörün altındaki kısma ismini girin, örneğin Web sitem ya da Web gibi ve Enter tuşuna basın. Harika! Şimdi devam edelim.

Daha önce anlattığımız gibi Not Defteri programını açın. Karşınıza gelen ekrana herhangi bir şeyi girin. Şu an için ne girdiğiniz önemli değildir. Bu yeni dosyayı kaydetmeden önce alttaki Dosya türü (Files of type) kısmını Tüm Dosyalar (All Files) olacak şekilde değiştirin ve üstteki Dosya Adı (File Name) kısmına index.htm yazın (htm ve html uzantıları varsayılan Web sayfası dosya uzantılarıdır. Başka türde uzantılarda vardır ama sizin bilmenize gerek yoktur). "Dosyanın ismi niye index.htm" diye şimdilik sormayın, ilerde anlatacağız.

DosyaØAç (FileØOpen) komutunu kullanarak açtığınız Aç (Open) iletişim kutusunda dosyaları açarken de Dosya türü (Files of type) kısmındaki seçeneklerden Tüm Dosyalar (All Files) seçimini yapınız. Aksi takdirde sadece uzantısı .txt olan dosyaları görebilirsiniz, diğer dosyalar gösterilmeyecektir. Bunu bir tür dosya filtreleme olarak düşünebilirsiniz.

Şimdi gelin Lale Hepaçar hanımın kişisel Web sayfasını birlikte yapalım.

1.Daha önce belirttiğimiz gibi öncelikle Windows masaüstünde yeni bir dizin oluşturun. Bunun için, farenin imleci masaüstünde boş bir yerdeyken sağ fare tuşunu tıklayın. Karşınıza gelen menüdenYeniØKlasör (NewØFolder) seçeneğini işaretleyin. Masaüstünde yeni bir klasör oluşturulacaktır. Yanıp sönen kısma yeni klasörün ismini girin (Örneğin Web ya da Benim sitem gibi) 

2.Yeni oluşturduğunu klasörü çift tıklayın. Bu klasör içindeyken bir Not Defteri belgesi açın. Farenin imleci ekranda boş bir yerdeyken sağ fare tuşunu tıklayın, yukarıdaki menü tekrar karşınıza gelecektir. Aynı menüden YeniØMetin Belgesi (NewØText Document) seçeneğine tıklayın. Bir Not Defteri dosya ikonu belirecektir. Bu ikonu çift tıklayın.

3.Not Defteri programı açılınca aşağıdaki HTML kodunu aynen girin;

<HTML>

<HEAD>

<TITLE> Lale Hepaçarın kişisel web sayfası </TITLE>

</HEAD>

<BODY>

LALE HEPACAR'ın KİŞİSEL WEB SAYFASINA HOŞ GELDİNİZ

Kisisel web sayfama hoş geldiniz

</BODY>

</HTML>

4.Bu Not Defteri dokümanını bir HTML dokümanı olarak kaydetmek için menüden DosyaØFarklı Kaydet (FileØSave As) seçeneğini tıklayın. Farklı Kaydet (Save As) adlı bir iletişim kutusu karşınıza çıkacaktır. Bu iletişim kutusundaki Kayıt türü: karşısında Tüm Dosyalar (*.*) seçeneğinin olmasına dikkat edin. Dosya adı kısmının karşısına sayfam.htm yazın ve Kaydet (Save) düğmesine tıklayın.

5.Not Defteri programından çıkın: DosyaØÇıkış (FileØQuit)

6.sayfam.htm dosyasını bulun ve açmak için üzerine iki kere tıklayın. Sisteminizde hangi Web tarayıcı bulunuyorsa (muhtemelen Firefox ya da Explorer) sayfanız bu tarayıcı tarafından gösterilecektir. Sayfanız aşağıdaki gibi gözükecektir. Web sayfasının oldukça sıkıcı göründüğünü doğru ama kısa zamanda çok daha iyi ve ilgi çekici Web sayfaları yapacaksınız.

LALE HEPACAR'ın KİŞİSEL WEB SAYFASINA HOŞ GELDİNİZ Kisisel web sayfama hoş geldiniz

7.Sayfanızın HTML kodunu görmek için Internet Explorer'da (ya da Firefox'da iken) menüden GörünümØKaynak (ViewØSource) seçeneğini tıklayın.

8.Sayfanızı dilerseniz değiştirebilirsiniz. Bunun için Not Defteri'i tekrar açın

9.Not Defteri programını açtıktan sonra, html dosyanızı açmak için Not Defteri menüsünden DosyaØAç (FileØOpen) seçeneğini tıklayıpsayfam.htm dosyasını açın.

Eğer yukarda gördüğünüz sayfayı açamıyorsanız, muhtemelen HTML etiketlerini girerken bir yanlışlık yapmışsınızdır. Kaydettiğiniz dosyanın uzantısının .htm olduğuna dikkat edin. Dosyayı sayfam.txtolarak kaydederseniz (varsayılan değer olarak Not Defteri bu şekilde kaydeder) sayfanız Web tarayıcı tarafından gösterilmeyecektir çünkü Web tarayıcıları uzantıları sadece .htmlve .htm olan dosyaları açarlar (başka uzantılara sahip dosyaları da açabilirler ama şimdilik bu kadarını bilmeniz yeterli).

UYARI !
Daha önce belirttiğimiz gibi HTML etiketlerini büyük harfle yazmanız kodlama açısından size kolaylık sağlayacaktır. Aynı zamanda daha sonra üzerinde değişiklik yapmak istediğinizde etiketleri bulmanıza yardımcı olur.

Sayfanızı tekrar açın ve kendinize ait bir şeyler ekleyin. Yukarıdaki yönergeleri takip ederek yeni bir Web sayfası daha yapın, örneğin ailem.htm sayfasına aileniz hakkında bir şeyler ekleyebilirsiniz.

<HTML>

<HEAD>

<TITLE> Lale Hepaçar'ın ailesi </TITLE>

</HEAD>

<BODY>

Ailem: Eşim Murat Hepaçar Makine mühendisidir. Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

</BODY>

</HTML>

Şimdi gelin Web sayfamızdaki metni biçimlendirelim.

Not Defteri programında ya da buna benzer bir metin editöründe çalışırken yeni bir satıra geçmek için yapmanız gereken tek şey Enter tuşuna basmaktır. Paragraflar arasına boş bir satır koymak için Enter tuşuna iki kere basmanız yeterlidir. Kelimeler arasında boşluk koymak içinse bildiğiniz gibi aralık tuşuna basmanız gerekir. Benzer işlemleri HTML kodunu girdiğiniz Not Defteri dosyasında yaparsanız Web sayfanızda benzer sonuçları almazsınız. Örneğin;

• Ailem: Eşim Murat Hepaçar Makine mühendisidir. Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.
• Ailem: Eşim Murat Hepaçar Makine mühendisidir.
• Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

Her ikisi de Web sayfasında aynı şekilde görünecektir. Web sayfalarındaki metni biçimlendirmek için özel etiketleri kullanmanız gerekir.

Ailem: Eşim Murat Hepaçar Makine mühendisidir.

<BR>

Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

Not !Web sayfasında yeni bir satıra geçmek için <BR> yazın. BR kelimesi İngilizce Break(aralık, boşluk) kelimesinin kısaltılmışıdır. <BR> etiketinin kapama etiketi yoktur yani tek başına kullanılır.

HTML kodu Web sayfasında aşağıdaki şekilde görünecektir:

• Ailem: Eşim Murat Hepaçar Makine mühendisidir.
• Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

Not !
Yeni bir satıra geçmek ve aynı zamanda boş bir satır eklemek için <P> etiketini ekleyin. Pharfi Paragraph (paragraf) kelimesinin kısaltılmışıdır.

Ailem: Eşim Murat Hepaçar Makine mühendisidir.

<P>

Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

Bu HTML kodu Web tarayıcınızda aşağıdaki gibi gözükecektir:

Ailem: Eşim Murat Hepaçar Makine mühendisidir.

Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

 

Bir metni sayfa içinde ortalamak için <CENTER> ortalanacak metin </CENTER> yazın. Örneğin;

<CENTER>KIZIM ŞEYDA </CENTER>

HTML kodu Web sayfasında (aşağıdaki gibi) sayfaya ortalanmış bir şekilde görünür:

KIZIM ŞEYDA

 

Belirli metinleri başlık haline getirebilirsiniz. Bunun için;

<H1>En büyük başlığı buraya girin </H1>

Not !

H harfi Heading (Başlık) kelimesinin kısaltılmışıdır.

Örneğin; <H1> Eşim Murat </H1>HTML kodu aşağıdaki şekilde gözükecektir.

Eşim Murat
Daha küçük başlık yapmak için sayıyı küçültmeniz yeterlidir, örneğin <H2> Eşim Murat </H2> başlığı yukarıdaki örneğe göre daha küçük olacaktır. En küçük başlık için <H6> yazmanız gerekir. Başlıkların büyüklükleri, sayfanızın gösterildiği Web tarayıcısının varsayılan değerlerine göre belirlenecektir. Yine de sizin verdiğiniz sıralama geçerli olacaktır.

2.5. Metnin Boyutunu ve Fontunu Değiştirmek

·         Metni kalın yapmak için <B> ve </B> etiketlerini kullanın. Örneğin; <B> dikkate değer bir metin </B> ifadesi Web tarayıcınızda dikkate değer bir metin olarak görünecektir.

·         Metni italik yapmak için <I> metin </I>

·         Metni altı çizili yapmak için <U> metin </U>

·         Metnin fontunu değiştirmek için <FONT FACE= "Font ismi"> metin </FONT> formatını kullanın. Örneğin Times New Roman fontunu kullanmak için aşağıdaki kodu kullanın;

·         <FONT FACE= "times new roman"> metni bu aralığa girin </FONT>

·         Font ismi kısmında dilediğiniz fontu tanımlayabilirsiniz, örneğin courier, comic sans serif vs. Fakat bu fontlar bu sayfayı ziyaret eden kullanıcıların bilgisayarlarında bu fontlar yüklüyse görebileceklerdir aksi takdirde bilgisayarları bu fontun karşılığı olan bir fontu bazen de rasgele bir fontu gösterecektir. İşi şansa bırakmamak için yaygın olarak kullanılan Arial, Times New Roman ve Courier New gibi fontları kullanın. Dilerseniz birden fazla seçenek belirtebilirsiniz. Örneğin;
<FONT FACE="Times New Roman, Arial, Courier"> kodunu girerseniz öncelikle ilk font kullanılacaktır. Eğer bu font yoksa ikinci font kullanılacaktır.

Not !
Bilgisayarlarda yaygın olarak bulunan belli başlı fontlar şunlardır:

Arial

Times New Roman

Courier New

Garamond

VeTahomardana

Impact

Uyarı: HTML dosyaları hakkında bir kaç uyarı

Karşınıza gelen Kaydet(Save) seçeneğinde her zaman doğru dosya uzantısını ve (.htm ya da .html) kullanın
Dosya isimlerinde her zaman için küçük harfleri kullanın. Birçok Web sunucusu (Web server) büyük harflere karşı çok gıcıktır ve dosyanızı göstermeme olasılığı vardır.

Dosya isimlerinde boşluk karakteri kullanmayın (uzun aralık tuşuna basınca çıkan karakter ekranda görülmese de aslında bir karakterdir). Boşluk karakteri Internet Explorer ya da Firefox gibi Web tarayıcılarının kafasının karışmasına yol acar.

Denemeler yapmayı unutmayın, ne kadar çok sayfa yaparsanız bu konuda o kadar başarılı olabilirsiniz.