Burada paragraf etiketini kullandığımıza dikkat edin. <p>..</p> etiketleri, tarayıcıya, ana metin unsurunu verir. Tarayıcı bu etiketi gördüğü anda, takibeden unsuru (bu bir başka metin olabileceği gibi, bir grafik öge, veya tablo da olabilir) bir satır aşağıya ve yeni satırın en başına alır.
Yeni Paragraf ile Yeni Satır’ın farkı.
</p> etiketi, tarayıcıya, yeni bir paragraf başlatmasını söyler. Buna karşılık, bir metinde bir satır, nerede bitiyorsa orada bitsin, takibeden satır yeni bir paragraf yapmadan, alttaki satırın başına gitsin isteyebilirsiniz. Bu iki durumun, yani yeni paragraf ile paragraf başlatmadan yeni satıra gitmenin farkı da mekanik daktilodan geliyor. Daktilo yazma kurallarından biri, yeni paragraf başlatırken, iki paragrafın arasında normal satır aralarına verdiğiniz boşluktan daha fazla boşluk vermekti. Diyelim satırlarınız tek aralıkla yazılıyorsa, paragraflarınızın arasında en az bir buçuk aralık olması gerekirdi. Ayrıca her yeni paragraf bir miktar içerden başlardı. Elektrikli daktiloların icadıyla, yazana kolaylık olması için mühendisler, yeni paragraf yapmayı ve sadece satır atlatmayı ayrı ayrı tuşlarla yapılır hale getirdiler. Bugün ENTER veya RETURN tuşu, kelime işlem programınızın varsayılan ayarlarına bağlı olarak, iki parafraf arasında arzu ettiğini bir miktar boşluk bırakır ve yeni paragrafı biraz içerden başlatır. Yeni paragrafın normal satır aralığından daha fazla boşluk bırakmadan ve birinci satırı içeri girmeden yazılmasını istiyorsanız, yine programına bağlı olarak, örneğin ENTER veya RETURN tuşuna basarken, CONTROL tuşunu da tutmanız gerekir. Internet’in ilk günlerinde, yazıların ekranda mümkün olduğunca kelime işlem programlarına benzer şekilde oluşturulması amacıyla </p> etiketine yeni paragraf başlatma, buna karşılık <BR> (line break) etiketine de sadece satır atlatma görevi verilmişti.
Paragraf etiketinin nasıl bloklanacağını ALIGN yüklemi belirlersiniz. Örneğin paragraf etiketini <p align=center> şeklinde kullanırsanız, </p> etiketine kadar gireceğiniz bütün metin, bulunduğu yerde ortalanacaktır. Paragraf etiketinin çeşitli kullanım özelliklerine aşağıda döneceğiz, Ama şimdi bu HTML sayfasını farklı bir isimle kaydedin ve kaydettiğiniz dosyayı tarayıcınızda açın. Bu paragraf, herhangi bir tarayıcının ekranında, şöyle gösterilecektir:
Bu görünümü sağlayan HTML komutları, koyu renkli (matbaacılıktan kalma deyimle siyah harfler) için <B> (ve tabiî, bu etiketin etki alanının bittiğini belirten eşi </B>), italik için <I> (ve </I>) etiketleridir.
Aynı şekilde istersek. bir paragrafın veya bir bölümünün harf ailesini (fontunu) da değiştirebiliriz. Yukarıdaki örnekte, metnimizin tarayıcının ekranında nasıl gösterileceğini bilgisayar kullanıcısının seçtiği varsayılan fonta bırakıyoruz. Başka bir deyişle, sayfamızın tarayıcıda hangi temel harfle gösterileceğini biz tayin etmiyoruz, işi bir bakıma şansa bırakıyoruz. Oysa oluşturduğumuz Internet alanı edebiyatla ilgili olduğuna göre, harf ailesini, sanata biraz daha önem verecek şekilde biz seçebiliriz.
Internet’te Font meselesi
HTML sayfanızı tasarlarken, kendi bilgisayarınızda mevcut fontların, Internet alanınızı ziyaret edecek herhangi bir kişinin bilgisayarında mevcut olacağını varsaymanız hata olur. Bunun için hemen hemen bütün Windows ve Macintosh ortamlarında mevcut harf ailelelerinden ayrılmamanız gerekir. Netscape ve Internet Explorer programlarının yeni sürümleri, kurulurken, kullanıcının bilgisayarına Internet’in klasik fontları olmaya başlayan bazı harf ailelerini yüklüyorlar. İşletme sistemlerinin temel harfleri ile tarayıcıların eklediği harfler arasında seçim yaparak da görsel etkisi arzu ettiğinize yakın sayfalar tasarlamanız mümkün. Bir başlıkta, ya da bütün sayfalarınızda ortak bir logo’da mutlaka arzu ettiğiniz bir fontu kullanmak istiyorsanız, bu başlık ya da logoyu, grafik haline getirebileceğinizi unutmayın. Ama grafiklerin de sayfanızın ziyaretçinin bilgisayarına aktarılması süresini uzatacağını akıldan çıkartmayın. Metinlerinizi, sırf görsel etki için grafik halinde sunarsanız, bir süre sonra ziyaretçilerinizin beklemekten bıkıp, başka sayfalara gidebileceğini hatırlayın.
SERIF-SANS SERIF Harfler
Latin alfabesine bugünkü biçimini veren eski Romalılardır. Harflerin kol ve bacaklarının ucunda, ana çizgiye dik gelecek kısa sonlardırma çizgisi olan serif’in ilk kez kağıt üzerinde mi, yoksa harfleri anıtlara oyan yontma ustalarının keskilerinden mi doğduğu bugün bile tartışmalıdır. Serif, daha sonra matbaacılıkta da çok iyşe yaramıştır. İlk yıllarda kağıt üzerinde harf şeklinde iz bırakan harf kalıpları çoğu zaman şimşir tahtasından oyularak yapılırdı. Bu kalıplara mürekkep sürülür ve üzerine konan kağıda basılırdı. Tıpkı lastik damga gibi! Ama tahta harf kalıplarının uçları çok çabuk aşınırdı. Aşınmanın uzun zaman alması için, zamanla harflerin kol ve bacaklarının çıkıntılı, yani serif yapılması gelenek oldu. Daha sonra, kurşun ve tunç gibi dayanıklı malzemeden harf kalıpları üretildiği zaman, çıkıntıları olmayan, sans-serif (serif’siz) harfler yaygınlaştı. Günümüzde de bilgisayar fontları, serif, sans serif ve dekoratif diye üçe ayrılıyor. Basılı eserlerde görsel etki, zıtlıklardan yararlanrak sağlanır. Bir sayfada yer alacak iki yazı unsuruna gerekli dikkati çekebilmek için bunlardan birinin serif, diğerinin sans serif harfle verilmesi yaygın bir uygulamadır. Ekranda zıtlıklar yoluyla dikkat çekebilmek için harf türünden başka şeyler, örneğin renk ve hareket unsuru da kullanabiliriz. Fakat matbaacılıktan kalma bir gelenekle, HTML tasarımcıları arasında başlıkla metni birbirinden serif-sans serif harflerle ayırmak giderek yaygınlaşıyor. Ekranda okuma kolaylığı açısından sans serif harfleri tercih edin. Özellikle küçük puntolu serif harflerin okunması çok zor olabilir.
Sayfamızda metinlerimizi Arial veya Helvetica; başlık ve kaynakları kaynağı da Times veya Times Roman ile gösterelim. Bunun için, HTML kodumuzda bir değişiklik yapmak zorundayız. Dosyamızın baş tarafına dokunmadan, paragrafın başladığı yere FONT etiketi koyalım. Bu etiketin parametreleri, başka bir ifadeyle, bu etikete niteliğini veren yüklemler, “face,” (font ailesinin adı), “size” (harfin büyüklüğü) ve “color” (harfin rengi) olarak sıralanır. Bu yüklemlerin nasıl kullanıldığını daha yakından görmek için, Başvuru bölümüne bakabilirsiniz. Biz burada sadece harfin türünü belirlemek istiyoruz; onun için sadece “face” yüklemini kullanacağız. HTML sayfasında paragraf etiketinden sonra <font face="Arial"> yazınız. Tabiî, bu etiketi sonlandıran, bitiren eşini ihmal etmeden! Kaynak cümlesi için aynı ifadeyi bu kez fontun adını değiştirerek yazacağız. Bitirdiğinizde, HTML kodunuzun paragraf bölümü şöyle olmalıdır:
<p><font face="Arial"> Bizler, inandığımız için ve bilinçli olarak harf tasarımcısıyız, harf dökümcüsüyüz, sayfa dizgicisiyiz.. <b>Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz olduğu için değil.</b> Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..</font></p><p><font face="Times New Roman">Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></font></p>
Bu sayfayı kaydedin ve kaydettiğiniz dosyayı, tarayıcınıza açtırın. Herşeyi doğru girdi iseniz, sayfanız şu sayfaya benzeyecektir:
Metin Düzenleme Etiketleri
Bu örneklerde HTML’in temel unsuru olan paragraf (<p>..</p>) etiketini kullandık ve çeşitli şekillerde biçimlendirdik. Ancak HTML paragraftan başka metin unsurlarını da tanır. Bu bölümde bu etiketleri ele alacağız.
HTML’in paragraftan sonra metne ilişkin en önemli yapı taşı, başlık etiketleridir. nitekim bizim yaptığımız örnek sayfanın da eksiği başlığının olmaması. Sayfamıza başlık koyşmadan önce HTML’in başlık etiketlerini daha yakından tanıyalım.
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı ayrı büyüklükte başlık kullanma imkanı veriyor. Farklı başlık büyüklüklerini daha yakından tanımak için, şu sayfayı yazarak, örneğin baslik.htm adıyla kaydedin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Başlıklar</title>
</head>
<body>
<p><font face="Arial">
<h1>H1: Bir numaralı başlık<h1>
<h2>H2: İki numaralı başlık<h2>
<h3>H3: Üç numaralı başlık<h3>
<h4>H4: Dört numaralı başlık<h4>
<h5>H5: Beş numaralı başlık<h5>
<h6>H6: Altı numaralı başlık<h6>
Normal Metin
</font> </p>
</body>Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir:
Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,
<h1>Tasarımcı kimdir?</h1>
<h2>Tasarım nedir? </h2>
satırlarını yazın ve sayfanızı kaydedin. Tarayıcıda açtığınız zaman sayfamızda iki başlık göreceksiniz.Paragraf etiketi gibi, başlık etiketinin de arkasına koyabileceğiniz tek özellik ALIGN’dır ve bununla başlığın sola, sağa, ortaya bloklanmasını veya sağ sol marjların aynı anda bloklanmasını sağlayabilirsiniz.Yerel biçimlendirmede kullanabileceğimiz stil unsurları paragraf, başlık ve bunların <B>, <I> ve FONT etiketleri ile biçimlenmesinden ibaret değildir. Diğer temel biçimlendirme etiketlerini kısaca sıralayalım:
<BASEFONT>: Temel font etiketi, bir sayfadaki bütün metinlerin temel fontunu, tarayıcının varsayılan fontu ne olursa olsun, istediğiniz font ailesine (Helvetica, Times gibi) veya font türüne (serif, sans serif gibi) çevirmenizi ya da büyüklüğünü belirlemenizi sağlar. (Bu etiketin sonlandırıcı eşi, yani </BASEFONT> etiketi yoktur.)
<BIG>...</BIG>: İşaretlediği metnin temel fonttan bir ölçü büyük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü büyük olacaktır.
Örnek: <p><font face="Times New Roman"><big>Rudolf Koch</big> - <i>Alman harf dökümcüsü, kaligraf</i></font></p
<SMALL>...</SMALL>: İşaretlediği metnin temel fonttan bir ölçü küçük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü küçük olacaktır.
Örnek: <p><font face="Times New Roman">Rudolf Koch - <small><i>Alman harf dökümcüsü, kaligraf</i></small></font></p>
<CENTER>..</CENTER>: Ortalama etiketi, işaretlediği metnin, içinde bulunduğu kutuda (bu bir tablonun hücresi olabileceği gibi, sayfanın kendisi de olabilir) yatay olarak ortalanmasını sağlar.
Örnek: <p><center><font face="Times New Roman">Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></font></center></p>
<S>..</S>: Ortasından Çizgi Çek (Strikethrough) etiketi, işaretlediği metnin ortasından çizgi çekilmesini sağlar. Bu etkiyi, bir metinden çıkartılmış yerleri göstermek için kullanabilirsiniz.
Örnek: <s> Biz inanıyoruz ki,</s> en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..
reh015.tif
<TT>..</TT>: Teleks Metni (Teletype Text) etiketi, işaretlediği metnin eşit genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. Bu etkiyi, bir metinde örneğin bilgisayar kullanıcısının kendi yazması gereken bölümleri göstermekte kullanabilirsiniz.
Örnek: <p><font face="Arial">Programın <tt>kullanıcının adını</tt> soran diyalog kutusuna adınızı yazınız</font> </p>
<U>..</U>: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte kullanabilirsiniz.
Örnek: <u>Biz inanıyoruz ki,</u> en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır.
<HR>: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin etkisinin bittiği yeri belirten eşi yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya yüzde olarak kalınlığını belirleyen WIDTH vardır. Doğrudan betin biçimlendirmeye yaramamakla birlikte bu etiket, metnin bölümlerini ayırmakta kullanılabilir.
Örnek: <HR><p><font face="Times New Roman">Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></font></p>
HTML’in metin biçimlendirmekten çok metnin bölümlerini tanımlamakta kullanılan ve özellikle Internet’in metin ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM, BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD, PRE, Q, SAMP, STRONG, SUB, SUP, VAR etiketlerini ve kullanıldıkları yerleri Başvuru bölümünde bulabilirsiniz.
Fakat burada kısaca da olsa, Internet giderek daha çok bilgi sunma ve bu bilgilerin bulunduğu yerleri gösteren bağlantıların listesi haline döndüğüne göre, listelerden söz etmek yerinde olacaktır. HTML bize birçok liste türü kullanma imkanı veriyor. Bunları sırayla inceleyelim ve uygulayalım.
Sıralı Listeler
<OL>..</OL>: Sıralı (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya rakam, ya harf koyarak, sıralanmış listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item) <LI> etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (1, rakamla; A, büyük harfle; a, küçük harfle; i küçük Romen rakamları ile; ve I, büyük Romen rakamları ile sıralanmayı sağlar), COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) ve START (listenin harfi harf veya rakamdan başlayacağını belirtir) şeklinde üç yüklemi olabilir.
Örnek sayfamıza, Web’de hemen herkesin tarayıcısının gösterebileceği güvenli renklere ilişkin bir sayfa koyalım. Akılda kolay kalması için kaç adet renk olduğunu belirtmek üzere, listemizde yer alacak unsurların rakamla veya harfle sıralanması uygun olur. Web Tasarım Rehberi sayfasının HTML kodunu açın ve mevcut paragrafı şöyle değiştirin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
<body>
<p><font face="Arial">
<h1>HTML Sayfada Güvenli Renkler</h1>
<ol type=1 compact>
<li>#000000=black (Siyah)
<li>#000080=navy (Lacivert)
<li>#0000FF=blue (Mavi)
<li>#008000=green (Yeşil)
<li>#008080=teal (Koyu Yeşil)
<li>#00FF00=lime (Parlak Yeşil)
<li>#00FFFF=aqua (Turkuaz)
<li>#800000=maroon (Vişne çürüğü)
<li>#800080=purple (mor)
<li>#808000=olive (Zeytunî yeşil)
<li>#808080=gray (Gri)
<li>#C0C0C0=silver (Gümüşî gri)
<li>#FF0000=red (kırmızı)
<li>#FF00FF=fuchsia (Parlak pembe)
<li>#FFFF00=yellow (Sarı)
<li>#FFFFFF=white (Beyaz)
</ol>
</font> </p>
</body>
</html>
Herşeyi yolunda gitti ise, tarayıcınızda şu sayfa karşınıza çıkacaktırenemiş olmak için, liste etiketinde, TYPE yüklemini “1” değil, “a” olarak verin. Sayfadaki listeniz, bu kez rakamla değil, küçük harflerle sıralanmış olacaktırBu liste “ç” ve “ı” gibi Türkçe harflerin olmadığını görüyorsunuz. Peki, listemiz çok unsur içerse, “z” harfinden sonra ne olur? İşte size güzel bir ev ödevi konusu!)
Sırasız Listeler
Sayfamızı tarayıcıda inceledikten sonra, aslında bu listenin rakam veya harfle sıralanmış olmasının istediğimiz görsel etkiyi yapmadığına karar verdik, diyelim. İstiyoruz ki listemizde, unsurların başına siyah, yuvarlak bir nokta gelsin. Bunun için, HTML’in sağladığı sıralanmamış liste etiketini kullanmak zorundayız.
<UL>..</UL>: Sırasız (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta konularak sunulan listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item) <LI> etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (DISC, içi dolu daire; CIRCLE, içi boş daire; SQUARE dörtköşe nokta ile sıralanmayı sağlar) ve COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) şeklinde iki yüklemi olabilir.
Şimdi HTML kodumuzda gerekli değişikliği yapalım. Yani liste etiketini <UL></UL> olarak değiştirelim, TYPE yüklemini de DISC yapalım:
<ul type=disc compact>
Listemiz, tarayıcıda değişik bir görünüm alacaktırListe türünü diğer iki unsuru deneyerek, değiştirebilirsiniz.
Tanımlama Listeleri
HTML’in, Internet’in daha çok bilimadamlarının bilimsel rapor alışveriş alanı olduğu günlerde, sayfa tasarımcılarına kolaylık sağlamak üzere geliştirilmiş tanımlama listeleri üç gruba ayrılabilir.
<DL>..</DL>: Tanımlama (definition) listesi etiketinin içinde, tanımlamalara (<DD>), tanımlama terimlerine (<DT>) veya her ikisine birden yer verilir. DL etiketine sadece COMPACT yüklemi verilebilir. DD ve DT’nin sonlandıran eşi yoktur. Bu etiketlerle oluşturulacak listeleri de birer örnekle inceleyelim:
Diyelim ki Web tasarımını ciddî bir şekilde meslek olarak edinmek isteyenler için Web Tasarım rehberi sayfamızda bazı HTML işlemcilerin ve grafik programlarının tanıtımını yapalım. Tabiî önce bu programları gruplara ayıracağız. Dolayısıyla önce sayfamızı ziyaret edenlere, bu gruplarda ne tür programların yer aldığını anlatmak zorundayız. Başka bir deyişle tanımlama listemiz üç tanımlama terimi (<DT>) ve bunlara ait üç tanımlama (<DD>) içerecek. Buna göre, HTML kodumuzun liste bölümü şöyle olabilir:
<h1>Web Tasarımcısının Alet Çantası</h1>
<dl compact>
<dt>HTML İşlemciler
<dd>Tasarımcıya, program ekranında Web sayfasını bir kelime işlem veya masaüstü yayıncılık programı gibi hazırlama imkanı veren ve ortaya çıkan sayfayı HTML kodlarını koyarak kaydeden yazılımlar.
<dt>Grafik Programları
<dd>Mevcut grafik programlarından farklı olarak, Web için güvenli renklerle çalışan ve oluşturulan grafiği tarayıcıların tanıyabileceği biçimlerde kaydeden programlar.
<dt>Web Alanı Yönetim Programları
<dd>Web yöneticisinin kendi bilgisayarındaki sabit diskte oluşturacağı sayfaları, Internet Hizmet Sunucu firmanın bilgisayarına aktarma ve güncelleştirme imkanı veren programlar
</dl>
Bu kodun oluşturduğu tarayıcı sayfası ise şöyle görünecektir:
Menüler
<MENU>..</MENU>: Tabiî burada kastedilen bir lokantanın menüsünden çok, tek kelime veya bir satıra sığabilecek uzunlukta, kısa ve çok az yer kaplayan listeler. Menü listeleri, diğer listelerden çok daha az satır yüksekliğine ve satır aralığına sahiptir.
Web tasarımcısının alet çantasında yer alması gereken programları kısa bir menü listesi olarak vermek istersek, HTML kodumuzun liste bölümününde şu değişikliği yapmak zorundayız:
<menu compact>
<li> HTML İşlemciler
<li> Grafik Programları
<li> Grafik Programları
</menu>
Bu şekilde değiştirdiğimiz sayfamız ise tarayıcıda şöyle görünecektir:
Bu listenin kapladığı dikey alanın, aynı unsurları içeren sıralı ve sırasız listelere göre daha az, ya da daha çok yer kapladığını kolayca bulabilirsiniz. Ve bunu yaparken, listeler konusunu bir kere daha gözden geçirmiş olursunuz!
Liste etiketleri türlerini sayarken, özellikle dosya adı gibi bir dizin içindeki unsurların adını sıralayan <DIR>..</DIR> etiketinden de söz edelim. Bu etiketin içine de liste unsurlarını <LI> etiketi ile yazarız. Ortaya çıkacak liste, Menü ya da unsurları noktalı sırasız listeden farklı olmayacaktır.
Listelerden, yukarıda verdiğimiz örneklerde olduğu gibi bilgi sıralama amacının yanı sıra, liste başlıklarına veya unsurlarına başka sayfalarla bağlantı yaptırarak, çeşitli şekillerde yararlanabilirsiniz. Bağlantılar’ı ilerde ele alacağız.
Listeleri, madde başlarında kendi oluşturacağınız veya başka bir kaynaktan sağlayacağınız grafik unsurları kullanarak, güzelleştirebilirsiniz. Aşağıdaki örnekte, açık yeşil renkli küçük bir dikdörtgen nokta olan dot.jpg grafiğini kullanarak, program tanım listesini görsel açıdan zenginleştirelim. Bunun için, HTML kodumuzun liste bölümünde şu değişikliği yapacağız:
<dt><img src="dot.jpg">HTML İşlemciler
.......
<dt><img src="dot.jpg"> Grafik Programları
.......
<dt><img src="dot.jpg"> Grafik Programları
.......
Burada yaptığımız şey, <dt> etiketinden sonra bir grafik kaynağı (image source) etiketi koymak ve kaynak olarak sabit diskimizdeki grafik dosyasının adını vermekten ibaret. Siz kendi örneğinizde uygun bir başka grafik dosyasının adını verebilirsiniz. HTML sayfada grafik unsurlara nasıl yer verildiğini ve kurallarını ilerde ayrıntılı olarak ele alacağız. Bu noktada dikkat edeceğiniz tek şey, grafik dosyasının HTML dosyası ile aynı dizide durmasıdır. Daha sonra başka dizinlerdeki grafikleri sayfalarımıza alma yollarını gözden geçireceğiz. Bu kodun oluşturduğu sayfa ise tarayıcıda şöyle görünüyor:
Listeler konusunu kapatırken, liste etiketlerini iç-içe kullanarak, farklı görsel etkiler oluşturabileceğimizi belirtelim. Örneğin, sırasız bir liste etiketinin içinde herhangi bir maddenin alt-maddelerini belirmek amacıyla, başka bir sırasız liste etiketi kullanabilirsiniz. Örneğin şöyle bir liste sunmak istiyorsunuz:
Madde 1
Madde 2
Madde 3
Madde 3-Paragraf A
Madde 3-Paragraf B
Madde 4
Madde 5
Madde 6
Bu etkiyi sağlayabilmek için, <UL>..</UL> etiketinin arasını şöyle doldurmanız gerekiyor:
<ul><li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<ul><li>Madde 3 Paragraf A</li>
<li>Madde 3 Paragraf B</li></ul>
<li>Madde 4</li>
<li>Madde 5</li>
<li>Madde 6</li>
</ul>
Bu kod, tarayıcıda, şöyle görünüyor:Burada dikkat edeceğiniz nokta, iç içe açılan etiketlerin sıralı şekilde kapanması olmalıdır. Tabiî, bir süre sonra başınız dönmezse!