Net-Uzman.Tr.Gg HtmlKodLar Asp Php Java BilgisayarDersleri Photoshop Dersleri Pr ArttırmaYontemleri DreamWeaver DersLeri

Dreamweaver Taktikleri

.1. WEB Tasarımı
1.2 Sayfa Hazırlarken Dikkat Edilecek Noktalar
Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar
kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?, vs.) kullanılmaz.
Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve
bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin
oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda
oluşturmak gerektiği asla unutulmamalıdır.
WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız.
Birçok WEB sunucu için varsayılan sayfa index.html'dir.

2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
2.1. HTML Komut Yapısı
HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için
kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Modül içerisindeki örnek uygulamalar için Notepad kullanılmıştır. Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya “dosya_adi.html” olarak kaydedilmelidir.

Yazım kuralları
?????? Komutlar büyük ya da küçük harfle yazılabilir.
?????? Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
?????? Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır.

Kullanım biçimi:
<etiket (tag)_adi>

Örnek : <HTML>,<BODY>,<TITLE>
?????? Bir etiket <etiket_adi> şeklinde başlar ve bazı etiketler dışında </etiket_adi>
şeklinde biter.
?????? Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların
okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride
açılan etiket biraz daha içeriden yazılmalıdır.

2.1.1. <HTML>
<html>, bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML
belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.

2.1.2. <HEAD>
HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır.

<META NAME="author" CONTENT="EMEL KAÇAR"> Kodu sayfanın
tasarımcı kimliğini gösterir.
<META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya
yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
<META NAME="keywords" CONTENT="Sitenizi arama motorlarında
bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri
içerdiğini gösterir.Burası arama motorları için çok önemlidir.
<META http-equiv=”*******” CONTENT=”5;
URL=http://www.megep.meg.gov.tr”> ******* ile sayfamız açıldıktan 5 saniye sonra
belirtilen adresi otomatik olarak açacaktır.
<META http-equiv=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00 GMT”>
Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
<META http-equiv="Content-Type" CONTENT="text/html; charset=windows-
1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve
html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile
yapıldığını gösterir.
<META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın
dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir.
<META http-equiv=”content-style-type” CONTENT=”text/css”> Content-typestyle
belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
<META NAME="copyright" CONTENT="© 2006 EMEL KAÇAR">
Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu
sayfanın hangi editörle yapıldığını gösterir.
<META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu
sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu
gösterir.
<META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi
kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu
belirtilmiş olur.
Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.

2.1.3. <BODY>
HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir.

2.1.4. <TITLE>
Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.

2.2. Listeleme Etiketleri
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve
sıralandırılan listeler hazırlamak çok kolaydır. Dokümanların göze hoş görünmelerini
sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidini destekler.

2.2.1. <OL>
Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da
cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir. Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. <ol> etiketine parametreler ekleyebiliyoruz. Type parametresi listemizin rakamla mı harfle mi başlayacağını, start ise hangi rakam/harfle başlayacağını belirler. Yani a) b) c) değil de d) e) f) gibi. Start değeri her zaman bir sayı olmalıdır. Yani sırayı alfabe olarak atamak ve “f” den başlamak istersek start değerini “f” değil “6”, type değerini de küçük “a” yapmalıyız.
Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip
olmasını sağlıyor. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)

2.2.2. <UL>
Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük
yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanıyoruz. <ul> için kullanılan parametreler type ve compact’tır. Type ile kullanacağımız madde iminin şeklini seçebiliriz. Bunlar disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

2.2.3. <LI>
<li> etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin
kısaltılmışıdır. Yukarıda anlatmış olduğumuz <ol> ve <ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de <li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.

3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERI
3.1. Metin Düzenleme Etiketleri
3.1.1. <HX>
Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini
tanımlar. “x” değeri 1’den 6’ya kadar değer alabilir. Sayı arttıkça yazı büyüklüğü
azalır. <hx> ile kullanılacak parametrelerden birisi align’dır. Align kullanıldığı sayfadaki yatay yerini belirler. Left (sola yaslı), right (sağa yaslı), center (ortala), justify (her iki yana yaslı) değerlerini alabilir. Align=”justify” html 4.0 etiketi olduğu için bazı tarayıcılarda sorun çıkarmaktadır. <h1 align=”center”> Bilgi </h1> yazdığınızda “Bilgi”kelimesini ortalı bir şekilde yazacaktır.

3.1.2. 
Aradaki metni koyu (bold) yazar.

3.1.3. 
Aradaki metni altı çizili (underline) olarak yazar.

3.1.4. 
Aradaki metni eğik (italic) yazar.

3.1.5. 
HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur. Tüm kodları ve metinleri tek satırda dahi yazsanız tarayıcı açısından farketmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için etiketini kullanıyoruz. Yukarıdaki örneklerde etiketini kullanmamış olsaydık ekrandaki ifade “Bilişim Teknolojileri Bölümü WEB Tasarım
Dersi” şeklinde bir alt satıra geçmeden yan yana yazılacaktır.

<html>
<head><title> Kalın yazma </title>
</head><body>
Bilişim Teknolojileri Bölümü
 
Web Tasarım Dersi
</body>
</html>
<html>
<head><title> Kalın yazma </title>
</head><body>
Bilişim Teknolojileri Bölümü
 
Web Tasarım Dersi
</body>
</html>
<html>
<head><title> Kalın yazma </title>
</head><body>
Bilişim Teknolojileri Bölümü
 
Web Tasarım Dersi
</body>
</html>

3.1.6. 
Aradaki metne paragraf özelliği kazandırır. Sonlandırıldığında, takib eden metin bir satır boşluk bırakılarak ve satır başına yazılır.

3.1.7. 
Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir.



Face : Yazı tipi (arial, tahoma, verdana, ...)
Size : Yazının büyüklüğü (1-7 arası)
Color : Yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk
değeri)

Bir etiketin herhangi bir parametresine atadığımız değer, o etiketin oluşturduğu alan içerisinde geçerlidir. Örneğin, ... ifadesi, sadece “...” ile gösterilen alan içerisine yazılanları mavi yapar.

3.1.7.1. Size
Metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin
büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlayabilir, direkt olarak bir rakam vererek de bunu yapabilirsiniz. Yazı tipi çok büyük olmamalıdır, büyük yazı tipleri hem kullanıcıların sayfayı okumasını zorlaştırır, hem de sayfanın güzelliğini bozar.

3.1.7.2. Color
Yazının rengini (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri) belirler. HTML'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu düzende 9'dan sonraki sayıları göstermek için A’dan F’ye kadar olan harfler kullanılır. Bununla birlikte HTML bazı renklerin İngilizce isimlerini de anlar, aşağıdaki örnekte bu renkleri görmektesiniz.

3.1.7.3. Face
Face parametresini tüm WEB tarayıcıları desteklemese de bu parametre kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin Face="Arial Tur" parametresi kullanıldığında yazı tipi Türkçe Arial olacaktır. Face değerine Türkçe desteği olmayan yazı tipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.

3.2. Görünüm Düzenleme Etiketleri

3.2.1. BGCOLOR
Sayfanın arka plan rengini belirler. <body> belirteci ile kullanıldığında sayfa arka plan
rengini; tabloda <td> etiketi ile kullanıldığında hücre rengini değiştirir.