CHIP Online - Arşiv: Mart 1997 DOWNLOAD HTML Kursu/Bölüm 1

\f "İCHIFUCU ,HTML Kursu/Bölüm 1 ¦H. _* JL HTML ile adım —Vm Homepage 0 0 Kendi Homepage'lerini Internet üzerinde kullanıma açmak isteyenlerin HTML'yi tanımaları gerekiyor. Birkaç HTML komutu, renkler, yazılar ve değişik resimler sayesinde güzel bir Homepage oluşturabilirsiniz. Bu kursta ihtiyacınız olan bilgileri bulacaksınız. HTML öğrenmek isteyenler kesinlikle doğru yerdeler. Kursun bu böUüııu basil i otnepage'in nasıl oluşturulacağını .idim adım anlatıyor. ! ;er bölümlerde Web dokümanını ırSel olarak geliştirmenin ve kulla -¦. - ¦ hale getirmenin yollarım bula cakSmiz. Basıl bir programlama dili olan HTV1I. (Hypcrıevl Markup Langu-agı Amerikan Savunma Bakanlığı tarafından teknik dokumanlar için geliştirilen ve 1986'da ISO ile norm durumuna gelen SGML'yi (-Standar-d Generaiizcd Markup Langu- ag> anı'] alıyor. llypertcM oluşiur-11 ı sayesinde metinler ve resim gıHI diğer elementler kolayca bir sayfa üzerinde bicimlcndirıle-bilıyorlar Bu^ayfalara Hyperlink'ler (bağlantı- HIP lar) yerleştirmek mümkün; böylece diğer Web sayfalarındaki bilgilere ulanabiliyor. İnlemelin gelişmesine paralel o-larak HTML'uiıı önemi de giderek arttı. Günümüzde birçok servis sağlayıcı kulLmıeılarına Internet ürerinde kemli sayfalarını ücretsiz olarak kullanıma sunma imkanını tanıyor. Böylece tiTML son kullanıcılar i-cin de önem kazanmaya başladı. Homepage oluşturmak isteyen kullanıcılar için servis sağlayıcılar kayıt alanına bazı sınırlamalar getiriyorlar. Ancak buna rağmen birçok resim içeren ve birden fazla sayfaya sahi p Hoıııcpage'lcr oluşturmak mıınıkun. 1 lomepage oluşturan kullanıcılar bunu itim dünyanın kullanımına a- KURS BÖLÜMLERİ Bolüm 1; Homepage icİı temel bilgiler Batimi?: Komplike tabloların ciuşturuiması Eötöm3: Frsme tekniğinin verimli kuBaramı eabıiirier. Bu savlalarda serbest meslek sahiplen hizmetlerim", firmalar lininlerini kullanıcılar ise ilgi duydukları konulan ranuabiliıier. bir HTML dokümanı temelde bir metin dosyaydı ' >kıadakı en büyük avantaj bu ûokiıia tip bilgisayar (PC MAC, ya da u,.. Workstanon) üzerinde belli bîr metin editörü île yaraiılabilmeleti ve acılabilıııelerı. W eh dokümanlarının dezavantajı ise yazım biçimlerinin karmaşık bir yapıya sahip olması. Her ifadenin (Tags) parantezlerin içine yazılması gerekiyor, iler Tag *>" karakteri ile bağlıyor. Daha sonra kıımut ve genelde bir parametre geliyor. Son olarak Tag ">" karakteri ile bitiyor. Bir Tag örneği olarak >b> iladesiııi verebiliriz Bu Tag arkasından gelen metnin kaim (bold) yazılacağını gösteriyor. TAG'LAR BİR HTML SAYFASINI BİÇİMLERLER Genelde komutların biçimlendirmenin hem başında, hem de sonunda belirtil m elci i gerekir. Biçimlendirmenin .sonunda komutu tekrar yazın, ancak bu defa başına 7" karakıe-nni ekleyin. sJb> İfadesi kendinden sonraki metnin tekrar normal bir şekilde yazılacağını belirtir HTML şayiasında yapiıgımz değişiklikleri ekran üzerinde hemen kontrol edebileceğiniz için, editörün ya da metin editörünün yanında bir de Browser (örneğin Netscape Navi-gaıor ya da Microsoft Iniernct Esplo-rer) çalıştırın. HI'Ml sayfası üzerinde bir değişiklik yaptığınızda bunu kaydedin ve Hrovvşer'm RLLOAD simgesini tıklayın. Böylece yaptığınız değişikliği hemen görebilirsiniz. Metİn edinirleri İle uğraşmayı yo-rueu bulan kullanıcılar piyasada bulunan HTML editörlerinden faydalanabilirler. Ancak bu editörlere başvurmadan oııcc ''HTML Editörleri ve Dönüşüm Araçları" başlıklı kutuya bir göz atın. MART 1997 9 CHkFUCU (HTM1 Kursu/Bölüm 1 İLK HTML SAYFASI Şimdi basîl hır Homepage'ı a dım adım oluşturacağız. İlk olarak Noipad'i ya da başka bir metin editörünü kul la nara ı> biı dosya yaralın ve dosyaya isie-112 bir ismi vererek uzantılını M M t ya da HTM olarak belirleyin. I Iim* 11ı Mİ dosyası prensip olarak ı namıı ilk satırına yakılacak o- ,ı -iml> Tayı ili- haşlar ve clokıV mamıı son sanrına yazılan >/hrml> il/ lmiT. Bununla birlikte biçim i; '¦¦ bazı koşullar bulunur. Bunla-n * a:îa ayırabiliriz: Birincisi HE-iı bölümde tetrıt'l tanımlamalar bıılıırnır. Pencerenin başlıkkısmında bulutum metin bunlar arasındadır. ikini) bolum ise BODY. lîu bölümde de metin bulunur, ancak huımııla birlikle BODY kısmı resimleri, arn-onlan ve Java Appleıİeıini de i :c Bu İki bölümü belirtmek îçûl I.-¦ ve >body> Tagları kullanılır. Hu bilgilerin ışığında bir Homepage ıJaki yapıya sahip olmalıdır; >!ılml> >head> >/head> >bî;rv ı >/body> >/hcml> lan belirtmek için örnekle gibi >ıilk"> Tag'ını kullanma* ısi >hşad> >titJQ:ı*~erTori Hayranlan>/title> >/head> >body> HorriBpage'irne Hoşgeldirıı?! Benim gibi Fcrıarl ye ilgi duyan kimilerle bilgi alışverişinde bulunmak ve sohbeı eımek isliyorum. Ferıa-ri'ye ilginiz varsa bana biı L-Mail gönderin. E-MgİI adresim: ... >/body> >/html> Sayfanız bu şekilde başlangıçla çalışır. Ancak daha sonra farklı bir işletim sistemine sahip bir bilgisayar ile açılırsa çeşitli problemler onaya çıkar. İşlerim sistemlerinin karakter tabloları çeşiıli farklılıklar gösterirler. Sadece bilinen harşer ve savılar aynı pozisyonda buluntular. Bu nedenle Türkçe karakterler doğru bir şekilde gösterilmezler. HTML sayfası hazırlarken Kontrol İçin editör ile birlikte birde Bromer çalıştırın. ÖZEL KARAKTERLERİN TANIMLANMASI GEREKİR Bu problemi çözmek için, kritik karakterleri doğrudan yazmak yerine onları tanımlamalısınız. Bu tanımlama için III MI. bazı özel kodlar kullanıyor. Bunlaı "&" karakteri ile başlıyor ve *f karakteri ile biliyor. Ör- neğin "o" hailini tanımlamak için wö'! ifadesini kullanmanız ge rekiyor. "Ö" için ise ifadenin ilk harfi büyük oluyor: "SrOuml-,".. *ş" harfi için 'Tsrrhonv "ı" harfi için ise ~&yacuic;B ifadelerini yazmalısınız. Diğer özel karaklerleı İçin yazılması gereken tanımlamaları >lıı ı p://w\vw. fıiiz.de.'web/webe dıt/'zeichen.lUnı> adresinde bulabilirsiniz. Örneğimizi düzelttiğimizde aşandaki nıelııi ekle edebiliriz: >hl.ml> >head> >title>Ferran Hayran lar&yacu-te;>/tiUf:> >/head> >bcdy> Homepage'ime HoSthûrn;gBl- dinîz! Benim gibi Feırari'ye ilgi duyan ki&lhnm;ilerle bilgi al&yaeu-te;tethorn;veri&rıhorn;mde bulunmak ve sohbet elmek isliyorum. Ferrari'ye ilginiz varsa bana biı E-Mail g&uuınl,liderin. E-Mail adresim: ... >/body> >/html? Özel karakterlerin tanımlanması iyi hır konsantrasyon gerektiriyor. Hata yapmamak İçin incini önee normal biçimde yazın ve daha sonra bnl-degişnr fonksiyonunu kullanarak karakterleri tek tek tanımlayın. Karakter tanımlamasının yanında. saylavı oluştururken başka kurallara da uyulması gerekiyor. Sanrı biıir-ınck ve boş satır bırakmak için de Tag'ları kullanmalısınız. Ehter tuşuna basmak yeterli olmuyor, çünkü Editörleri ve Dönüşüm Araçları ıda çok saytda HTML adiujru ve metin editörleri i- pAjşüm araclan bulunuyor. Bunlar HTML bilgisi olmak- (r.h sayfalan olustürrnemz: sağlıyorlar. Bu program- .[ ekte verdikleri sözü yenne gnrjrshiıiyoria--. ancak kar- bir yapıya sahip kapsamlı bir sayla SÖZ konusu oldu- ıı p"nv!>:r-|--r- 'V-rarnı; Knhhi iyor. Nedtrıi İüt bj ü HIF rsc'arin HTML komutlanna ve Özelliklerine tam olarak hükmetme imkanına sahip olmamaları. Bu durumda bazı biçimler ya hiç yaratılsrnıyor, ya da bir mildahefe sonucunda meydana getmlebiüyor. Bu da tabii ki HTML bilgisi gerektiriyor. Pratikte en kullanışlısı sayfalan bir metin editörü yardımıyla HTML komutlarını kullanarak yaratmak. MART 199? r'c basılarak gerçekleştirilen sa-öhınmesı dikkate alınmıyor. Bu-n£n yerine >br> tbrcakl ve >p> ipa-.raplı) ifadelerinin kullanılması I gen-'kiyoı. ¦ |>pr> ifadesi saıır sonunu belirtiyor. ifadeden somaki meıin bir alı sama y^lıyıır. ~nıeriıaba>hr>rnOTiahaf i- dfcsı merhaba kelimesinin ah alla İ- mra da yazılmasını sağlıyor. ¦¦¦-"i >p> Tag'ı da metni iki satırda veriyor. ancak ek olarak boş bir sala o-luşuıruyor. "merhaba>p>mcrhaha" iladesı ekrana aşağıdaki şekilde yansıyor; merhaba merhaba Metinler arasında birden fazla satır bırakmak istiyorsanız, >br> Tag'mı kullanmalısınla. Çünkü yazılan bir den fazla >p> dikkate alınmaz. Metinler arasında iki sal ir bnaknıak için şu i İadeyi yazmalısınız: marhaba>br>>:br:>>;br>merlîaba örnek sajia. henüz biçimlenmemi? metinlerden oluştuğu için göze boş görünmeyebilir. >imdi bu melınlere farklı vasi hûyuklüklcri ve renkleri i-lı* hoş bir gönmüm kazandırmak ge-r ekiyor. FONTLAR S A YFA YA HA YA T KATAR amaç için kullanılacak u-lan komut "Koni". Parklı yazı loımaıiarı elde ermek için comut ile birlikte bir dizi para-ttfcelre kullanılıyor: "Size" yası biı-vşıklugumı, "Color' yazı rengim. tc' ise yazılipmi belirtiyor. 15u ımei releri kullanarak aşağıdaki kle biı komut yakabilirsiniz: ont size=5 calor-red faDR=Aı,i-c:İCİGü>r-ü'HHpHijHİ!:irt I insin iz!>/font> cfurumda saylanın başlımı bu-puntolarla. kırmızı rekıe ve be-şÜen yazı tipinde gösterilir "Size barameire.si yedi farklı değer alabilir: Hen (en küçük) 7'ye (en büyük) dar. Bunun yanında aktif yazı bulûğu arttırılarak ya Ja azaltılarak değer belirlenebilir. Örneğin t 5ize=+2> ifadesi yazı hıiyükltı-iki kademe ariurır. Aynı sekil-foni size=-l> ifadesi de biı kade-zalıtr e-Ior" parametresinin pek bir 0-gi yok. I ek yapılması gereken isminin y:i2ilması. Sadece renk feri yazılarak sınırlı sayıda renk edildiğinden. RGB (Red/Gre-lue) delerlerinden faydalanarak . Câisık renkler elde etmeniz mümkün Kesimde bazı RGB delerlerini i) itebilirsiniz. rkh RGB değerleri verdiğinizde ışık karışımlar ve hunim sonuna larkh renkler uluştunıbilii'si-Uenk deleri vermek için "co-(r'gg'ld1 ifadesini kullaıunalısı-Degerlerin 00 (0) ile İT (235) a-da olması gerekiyor. Ornegın or=*(fföOff" ifadesi maksimum 199.' ¦ J ;— f fnnan D/ i,. I O-1 W ~ -¦ ^"^•f-.....¦' (Rod/Green/Blue) değerlerini kullanarak çeşitli tenk kaıısımları elde H 'im edebilirsiniz. Colortuhle t>v -..-.-;¦¦:¦ 7-1,. -,¦¦¦¦.¦. ..¦ ¦¦ifîtı .- -i i-- -• '.'> ö-ı -& : -. ı a!ö HTML dokümanı yavaş yavaş biçimleniyor. kırmızı, minimum yeşil ve maksimum mavi karışınım belirtiyor. Sonuçta ortaya çıkan renk Mor. Örnekle de görebileceğini; gibi j^i farklı yazı ııpi lanımlaiHİı (Anal ve HelvelicaJ. Bunun nedeni her bilgisayarın farklı yazı tipleri barındırması. Bu nedenle birden (azla yazı tipi tanımlanması oldukça faydalı. Bu durumda ilk olarak bulunan vazı tipi kullanılıyor. Örneğimizde yazı tipi o-İarak Arial kullanılıyor. Anal sistemde bulunaınasaydı metinler I leTvetica ile gösterilecekti. Yazı tiplerini beliı-uıkeı: birbirlerine yakın olnıalanna dikkal eıtııelisiııiz. Aksi halde sayfanın göriim'ımü tasarladığınızdan çok farklı olabilir. Arial ve I lelveıica örneğinde bu koşula uyuluyor. "Face™ parametresi eski bir HTML standardı degıl. Bu özellik Netscape ve Mıcrusolı larahndatı Browser'ları-na dahil edildi. Bunun anlamı şu. laikli yazı tipleri sadece Netscape \avi!>ator 3.0 ve ıîxpk>rct 3.Oda görülebilirler. Netscape'in l.\ sürümlerinde yazı npi dikkate alınmaz ve metin standart yazı tipinde gösterilir. Metinlerin biçimlenmesi sayesinde Web >aylamız daha yüzüne bakılır bir hale geldi. Ancak arka planın Standart olması sayfanın hala köıü gözükmesine neden oluyor. Arka plan rengini değiştirerek bunu engelleyebiliriz. Bunun için "bgcolor" (BackGround) parametresinden sonra istediğiniz rengi belirtin. Örneğin: >body bgcolor-bluo MİMİ dokümanınız anık yukarıdaki resimde olduğu gibi görünebilir, tlMP 171 CHIFUCU HTML Kursu/Bölüm 1 ¦ HTML DOKÜMANINA RESİMLERİN EKLENMESİ ICİndc resini olmayan bir 11 l'ML libkümanı görselliğin ön planda _ mdugu Worl Wide VVeb dünya- sıridş kendisine bir yer bulamaz. Hu r ııle örnek dokümanımızı da ıc .siışterle zenginleştirmemiz gerek i- :¦ l : ¦ faya resim eklemek iı'in kıılh-112 komut "İma* (imagee). DLürı ve dosya isimleri "src"' (sour-cej parametresinin yardımıyla belirli |i) or. Dosya lormalı olarak ise I ve dil kullanılabiliyor. işte bir örnek: rc="/res im / merh s ba. cjif "> omur dokümanın bulunduğu Iftı bir ali dizini olan RESİM dizinindeki belinden dosyayı dokumun ile bağlar. tepmiıı büyüklüğünü "vvidllr {ge-uişlifc) ve "lıeiglu (yükseklikı paramı inlen ile ayarla ya bil ilciniz. De- ğerlen piksel olarak yazmalısınız. >img Sf'Cİ"/resım/merhaba.gif width-70> samı resmin genişliğini 70 piksel olarak belirler. İni dorumda yüksek' lik resmin şayiadaki durumuna göre belirlenir. Resmin yüksekliğini de belirtmeniz mümkün. Hu durumda da genişlik duruma göre belirlenir, Pratikte iki değer aynı anda kullanılmaz. Aksi halde resimde enine ya da boyuna bozulmalar olabilir. Boyut belirlerken karşılaşılan bir problem danS var: Ihtmap resimler büyütüldüğünde kaliteleri oldukça düşüyor. Bunu engellemek için resmi önce bir resîm programında büyütebilir ve kalitesini kaybetmemiş resmi birebir boyuna şayianıza akta rabilirsiniz. Böylece "VV'idth" ve "11e-ighı" parametrelerini kullanmanız gerekmez. ANİMASYONLU GIF DOSYALARININ EKLENMESİ HTML animasyonîu G1L dosyalarını dokümanınıza eklemenize olanak la-nıyor. Animasyonlu GIF dosyası, i-çindc arka arkaya laikli göriıntûlcı bulunan özel bir GIF dosyasına verilen ad. Bu GIF dosyasını normal bit resim programı ile açtığınızda sadece ilk gürünıûyıi görebilirsiniz, diterleri göz önüne abmmız. Animasyonlu >ıir dosyalan ile çalışabilmek için ö- zel bir yazılım kullanmalısınız. Örneğin Wmdows alımda Shareware bir program olan Q\V Coııslruıiıoıı Şeften faydalanabilirsiniz, Bu programı >hup://w ww.ini ııdvvork.shop .com/alebenıy/gifton.html> adresin de bulmanız mümkün. Bununla birlikte bulun Brovvser'lar animasyonlu GIF dosyalarını desteklemiyoılar. Ancak en önemli iki Browser olan Netscape Navigator vc H.vplorer 5.0 bu dosyalan destekliyorlar. LİNKLER HTML SAYFASINI TAMAMUYOR Örnek sayfamızda cksSk o> lan iek şey diğer sayfalara ya da başka ilgine adreslere geçişi sağlayacak olan linkler. Bir link prensipte >a lıref-...> Tag'ı î-lar ve >/a> ile biteı. Bu iki Tag aracında bulunan metnin altı çizilir ve renkli olarak gosuvilir Böylece zi-van'Kİ bu metnin ııklanabilecegini kol yca anlar ,ı lıref=" ifadesinin arkasına çağrılacak olaa dosyanın dizinini ve adım yazıiu >a I ,ef="/üiv/indeks ir.r-1"-- n dekB>/H> an başka bir Serveida bu-sa, UKL'nin tamamını yazın: raU"http://www.iTietu.e-TÜ>/a> ı için kullanılacak oktu ren-reyebilirsiniz. Bunun için Tag'ına 'link"' ve "vlin.k" pa- rametreleıi ile bir ifade yazmalısınız. link" parametresi tıklanmamış olan link in rengim, "vÜnfc" (visİled lirik) parametresi ise sevilmiş olan linkin tengini İK-Jıı'ler. Bu renklen belirlemek için aşağıdaki gibi bil satır yazabilirsiniz: >body bgcolor=biuİ link>yelIow vlink=red> Bir E-Mail linki olmadan HTML sayfası laımnnlanmış olma:-. Aksi Linkleri resimleri ve metinleri ile lam bir HTML sayfası. halde kulama E-Mail programım çatıştırmak VC adresi burada yazarak L-Maili yollamak zorunda kalır. Buna karşılık E-Mail Hııki Browseı içinde biı pencere açar vc kullanıcı bu pencere Özerinden direkt olarak E-Mail gönderebilir. E-Mail linkini de normal link gibi lamınlıyorsunuz. ancak dosya adı yerine L-Mail adıesi yazılıyor. Aynca adresin başına da "maille;" ifadesinin eklenmesi gerekiyor. Örneğin: Bana Mail G ön de re bilirsin iz. >a bref= 'maiHo:ornek@oriK-k.iiım ir">Buıaya lıklayın>/a> Anık Momepage'imiz hazır. Tabii ki ınelınlerle resimlerin düzensin ve gösterişsiz olmaları sayfanın basıl görünmesine neden oluyor. Bir sayfaya ait elementlerin pozisyonlaınıı tablolar üzerinde serbestçe belirlemenin yollarını kursun bir sonraki bölümünde bulabilirsiniz. Cıohiıuı: StOifiUrtefeîn MART 199?

Arşiv Listesi