Gözde VH-l müzik gösterisi The List. Best Rock Anthem ya da Best Hair Band gibi müzik konusunda en iyi seçimlerin bir listesi üzerinde birlikte çalışacak insanları bulmak için alışılmamış bir yaklaşıma sahiptirler. Meadoaf ya da Kevin Bacon gibi ünlülerin görünmeleri konusunda söz veremesem de, HTML için The Lisfin bir sürümünü içeren yeni bir tartışma başlatabilirim. Bir metin sırasını, sıralı ya da sırasız bir liste halinde parçalamak için kullanılan HTML listelerine başvuruyorum. Numaralı listeler olarak bilinen sıralı listeler, bir işlem gerçekleştirmek için gereken adımları tipik olarak özeder. Sırasız bir liste, örneğin bir reçetenin içindekilerini belirtmek için kullanılabilir. Aslında HTML’de desteklenen üç tür liste vardır: • Sıralı listeler, numaralı öğeler içerir. • Sırasız listeler, madde numaralı öğeler içerir. • Tanım listeleri, ilgili tanımlar ile terimleri içerir. Farklı etikeder her türü belirtir ve ilerleyen kısımlarda kapsanmışlardır.
Sırasız Listeler Sırasız listeler, birbirine komşu bir madde işareti ile görüntülenen öğelerden oluşur. <ul> etiketi bir sırasız listeyi çevreler. Liste içinde, bağımsız öğelerin her biri <li> etiketi ile kodlanır. Aşağıdaki kod, bir sırasız liste oluşturmak için bu etikederin nasıl kullanılacağını örneklemektedir:
<P> Following are the sports in which I regularly participate: <ul> <li>Hockey</li> <li>CycTing</li> <1i>Skateboarding</li> <li>Wiffle Bal1!</li> </ul> </p>
Not________________ _ _ _______ _____________________
Bir sırasız liste içindeki öğeler madde işarederi ile tanımlandığından, sayı ya da harflerin tam tersi bir şekilde “sırasız” olarak düşünülürler. Bir sonraki kısımda sıralı listeleri öğreneceksiniz.
Not
Her öğeyi HTML içinde kendi satırına yerleştirmek zorunlu olmasa da, kodun okunması ve anlaşılmasını kolaylaştırır.
31
Kısım 1 HMTL’e Başlarken
Şekil 2-4, Internet Explorer’da görüntülenen biçimlendirilmiş paragrafı göstermektedir.
‘Ü Unmetered List Example Page – Microsoft. Intww.l Exploittir J Fie £d* ifww Favorites loots H<*>
.. D j Andies* [|Pj CABooksVMSHT Ml \Sou ce\Chap02\UnocderedLisLhtmt ~q ^6o j ………21 Following are the sports in which I regularly participate:
• Hockey • Cycling • Skateboarding • WiffleBall!
j J
Şekil 2-4. <ul>etiketi, öğelerin sırası% listelerini oluşturmanıza olanak sağlar;
<ul> etiketinin, tüm listeyi çevreleyen başlangıç ve bitiş.etiketlerinden oluştuğuna dikkat edin. <1 i> etiketi, listedeki her öğeyi tanımlar ve bir başlangıç ve bitiş etiketi de gerektirir. <ul> etiketi, listedeki her öğenin yanında gösterilen bir madde işareti türünü değiştirmenize olanak sağlayan bir type özniteliği destekler. Aşağıdaki değerler, type özniteüği ile kullanım için kabul edilebilir değerlerdir, di sc değerinin varsayılan madde işareti olduğuna dikkat edin: • di sc etiketi, içi dolu bir daireyi belirtir • ci rcl e etiketi, içi boş bir daireyi belirtir • square etiketi, içi dolu bir kareyi belirtir
Not ________________________________
<Uİ> etiketinin type özniteliği, eski Web sayfalarında bile çok sık kullanılmaz.
Sıralı Listeler Görüntülendiklerinde sayılar ile tanımlanmaları dışında sıralı listeler, sırasız listelere benzer. Numaralandırma, varsayılan ayar olarak “1” ile başlar ve listedeki her değer için bir artar. <ol> etiketi, sıralı listeler oluşturmak için kullanılır. Aşağıdaki, daha önce incelediğiniz sırasız listeye benzeyen basit bir sıralı liste örneğidir:
<p> Following are the sports in which I regularly participate in, ranked in order from most favorite to just fun-to-do: <ol> <li>Skateboarding</li> <li>Hockey</li> <li>Cycling</li> <1i>Wiffle Ball!</li> </ol> </p>
32
Metin Biçimlendirmek Bölüm 2
Şekil 2-5, Internet Explorer’da görüntülenen biçimlendirilmiş paragrafı göstermektedir.
p! (Jrrieıed List t xample Page – Microsoft Inteınel , | -r r/ — —
……………………….. …. ………….WttÊÊÊÊM^Û i Following are the sports I regularly participate in, ranked in order * J from most favorite to just fon-to-do: «
1. skateboarding 2 Hockey I 3. Cycling 4. “Wiffle Ball! 1 Şekil 2-5. <ol> etiketi, öğelerin sıralı listelerini oluşturur.
Şekil 2-5, HTML kodunda herhangi bir numaralandırma belirmese de, sayıların bir sıralı listedeki öğelere nasıl atandığını göstermektedir. Her zaman “1” rakamı ile başlamak ve oradan devam etmek gibi, sıralı listeler üzerinde potansiyel bir sınırlandırmayı düşünmüş olabilirsiniz. Neyse ki HTML, hem başlangıç numarasını hem de numaralandırma sisteminin türünü değiştirmenize izin verir, start özniteliği, bir liste için başlangıç sayısını belirlemenize ve type özniteliği de numaralandırma sisteminin türünü belirlemenize olanak sağlar. Aşağıda type özniteliği için izin verilen değerler ve ilişkili numaralandırma sisteminin bir örneği yer almaktadır: • 1-1, 2, 3, 4,… (varsayılan) • A—A, B, C, D ,…. • a-a, b, c, d ,…. • I-I, II, III, IV,….. • i-i, ii, iü, iv,…. Bir sıralı listenin numaralandırma sistemini değiştirmek için, basitçe, yukarıdaki değerlerden birini type özniteliğine atayın. Bir sonraki, bir sıralı listeyi değiştirmek için start ve type özniteliklerinin her ikisini kullanmanın bir örneğidir: <p> Following are some of many my favorite letters: <ol type=”A” start=”5”> <li>The 1etter E!</li> <li>The letter F!</li> <1i>The letter G!</li> <li>The letter H!</li> </ol> </p>
Bu örnekte, öğelerin yanındaki büyük harfleri görüntülemek için, liste türü “A” değerine ayarlanmıştır. Alfabenin beşinci harfini belirtmek için birinci öğeyi “E” harfi ile tanımlamakla sonuçlanacak şekilde listenin başlangıç sayısını “5” değerine ayarlayın.
33
7 Kısım 1 HMTL’e Başlarken
Tanım Listeleri Noah Webster, 1806’cta HTML’e erişim sahibi olsaydı, terimleri ve ilişkili tanımlanın işaretlemek için tanım listelerinin değerini bilirdi. Webster, son iki yüzyılda gelişmiş ve günümüzün gözde Merriam-Webster sözlüğü olan ilk Amerikan sözlüğünü yayınlamıştır. Büyük bir olasılıkla, kendi sözlüğünüz ile bir tutmamanıza rağmen, tanım listelerini kullanışlı bulabilirsiniz. Tanım listeleri, terimler ve ilişkili tanımlarından oluşur. Bir tanım listesi, <dl> başlangıç ve bitiş etiketleri içine alınır ve liste içindeki her terim <dt> etiketi ile tanımlanır. <dd> adındaki diğer bir etiket, izleyen terimin tanımını sağlamak için bir tanım listesindeki <dt> etiketini izlemelidir. Biraz karmaşık görünebilir ama, göreceli olarak basit olduğunu iddia edebilirim. Bu örnek, bir tanım listesi oluşturmak için bu etiketlerin nasıl bir araya geldiğini göstermektedir:
<P> Following are a few technologies related to Web page development, along with a brief description of each: <dl> <dt>Java</dt> <dd>A programming language designed to add interactivity to Web pages through special programs called applets that run within the context of a page.</dd> <dt>JavaScript</dt> <dd>A scripting language designed to add interactivity to Web pages embedding script code directly in HTML code.</dd> <dt>VBScript</dt> <dd>A scripting language that serves a similar role as JavaScript, but that is loosely based upon Microsoft’s popular Visual Basic programming language.</dd> </dl> . </p>
Şekil 2-6, Internet Explorer’da görüntülenen biçimlendirilmiş metni göstermektedir.
Following are a few technologies related to Web page development, along with a bnef description of each
Java
A programming language designed to add interactivity to Web pages through special programs called applets that run within the context of a page. JavaScript A scripting language designed to add interactivity to Web pages by embedding script code directly m HTML code.
U1Sİ2Sİ
I Address j&j C \Books\MSHTML\Source\Chap02\DelinitionList hlml
VBScript A scripting language that serves a similar role as JavaScript, but that is loosely based upon Microsoft’s popular Visual Basic programming language.
Şekil 2-6. * <dl> etiketi, terimler ve tanımlarım içeren tanım listeleri oluşturmanıza olanak sağlar.
34
Metin Biçimlendirmek Bölüm 2
Örnekte de görebileceğiniz gibi, tanım listeleri oluşturmak çok kolaydır: Tüm listeyi <dl> başlangıç ve bitiş etikederi ile çevrelersiniz ve sonra da terim ve tanımlan <dt> ve <dd> etikederi ile işaretlersiniz.
Not______________ _____________________ _______________
Listelere genel olarak bakarsak, liste etiketlerinin tümü iç içe geçmeyi destekler—bu, listeleri başka listeler içinde oluşturabileceğiniz anlamına gelir. Özellikle listeleri diğer listeler içine yerleştirirken, her başlangıç ve bitiş etiketini uygun olarak eşleştirdiğinizden emin olun.
Son Bir Açıklama Hepimizin, her şey hakkında bir fikri olan bir arkadaşımız vardır. Güncel olaylar üzerindeki derin fikirlerini dinlemeyi sevseniz de, çok fazla açıklama yapmaları sizi sinirlendirir. HTML’de böyle değü. HTML açıklamaları kodu açıklar. Daha belirgin bir şekilde HTML kodundaki açıklamalar, belge içeriğinin parçası olmayan bilgiyi tanımlar ve işlenmez ya da görüntülenmezler. Açıklamalar, özel açıklama sonlandırıcdarı <! – -ve –> ile işaredenirler. Aşağıdaki, HTML koduna yerleştirilmiş basit bir açıklama örneğidir:
<!– Finish the following paragraph –> <P> It ali began innocently enough in the fail of 1987… </p>
Bu örnekte açıklama, belgeye yapılması gereken işleri açıklamak için kullanılmaktadır. Açıklamalar, HTML kod satırlarının sınama sırasında geçici olarak göz ardı edilmesi için kullandabilir. Açıklamaların en yaygın ve önemli kullanımı, JavaScript ya da VBScript ile yazdan kodlar gibi komut dosyası kodlarının yerleştirilmesidir. Bu tür bir kodu yorumlama yeteneği olan Web tarayıcdarı, bir belgedeki açıklamaları, herhangi bir komut dosyası kodu olup olmadığını görmek için düzenli olarak tararlar. Bu şekdde açıklamalar, yalnızca işlenmeyecek bügüeri içermekten daha fazla şey yapabilirler. Bununla birlikte saf HTML kodu açısından tarayicdar, basitçe açıklamaları göz ardı ederler.
Not__________________________________________________
Açıklamalar, diğer açıklamalar içinde olamazlar. Bir Web tarayıcısı, bir açıklamanın başlangıcını belirten < ! – – işareti ile karşılaştığında, açıklamanın sonunu belirten – – > son- landıncısını buluncaya kadar her şeyi göz ardı etmeye devam eder. Bir resim hakkındaki açıklamayı bir paragraf metin hakkındaki diğer bir açıklama içine yerleştirirseniz, tarayıcı, resim hakkındaki açıklamayı, ilk – – > bitirme sonlandıncısında bitirir ve açıklama paragrafının kalanı konusunda ne yapacağını bilemez. Hikayenin doğrusu, tüm açıklamaların kendi başlarına hareket etmeyi ya da iç içe geçmeden uzak durmayı öğrenmeleridir.
35
Kısım 1 HMTL’e Başlarken
Sonuç Bu noktada bir şey kesindir: HTML’de metin biçimlendirmenin olmadığını iddia edemezsiniz! Web tasarım konularının en garibi olmamasına rağmen metin biçimlendirme, Web sayfa tasarımının temelini oluşturur. Boşluk ya da diğer biçimlendirmeler olmadan, tümü aynı boyuttaki metin sayfalan ile dolu bir Web sayfası düşünün. Metin biçimlendirmenin neden çok iyi bir iş olduğunu hemen fark edeceksiniz. Gelecekte Web sayfalarınızdaki metinden en şekilde yararlanmak konusunda birçok şey öğreneceksiniz. Ancak o zamana kadar beklemeyeceğiz. İlk olarak, stil sayfalan gibi daha gelişmiş konularla uğraşmadan, Web sayfaları oluşturmak için gereken temel HTML tekniklerini iyice kavramanız gerekir. Metin ve nasıl biçimlendiği hakkında inanılmaz derecede bir denetim kazanmanızı sağlayacak stil sayfalarının nasıl kullanılacağını, Bölüm 11 ile Bölüm 13 arasında öğreneceksiniz. Bu bölümde, fiziksel ve içerik-tabanlı HTML ‘etikederi kullanarak metin biçimlendirme konusunda eksiksiz bilgiler edindiniz. Bu iki sınıflandırma karmaşık görünse de, bun- lann, yalnızca görüntüleme için içeriği işaredeme ve etiketler ile anlamı ilişkilendirme arasındaki ayrımın sıra dışı bir yolu olduklarını anladınız. Her iki şekilde de metin biçimlendirme etikederini kullanmanın sonucunda sözcükleriniz, etikederi nasıl kullandığınıza bağlı olarak sayfa üzerinde farklı görünür. HTML liste etikederini ve bilgileri madde işaretli ve numaralı listeler olarak düzenlemenin bir aracını nasıl sağladığını incelediniz. Bölümü, bir Web tarayıcısı tarafından işlenmeyen ya da görüntülenmeyen ve bir Web sayfasının gövdesine bilgi eklemenize olanak sağlayan açıklamalara hızlıca göz atarak bitirdiniz