HTML DERS NOTLARI HTML ‘ E GİRİŞ 1. HTML NEDİR ? HTML (HyperT (HyperText ext Markup Language Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarl browserlarla a görebileceğ görebileceğimiz, imiz, internet internet dökümanla dökümanları rı oluşturmaya oluşturmaya yarayan bir çeşit dildir dildir.. Örneği Örneğin n okudu okuduğun ğunuz uz bu sayfa sayfa HTML HTML dili kullan kullanıla ılarak rak hazırlan hazırlandı. dı. Siz de browse browser'ın r'ınızı ızı (Inter (Internet net Explor Explorer er,, Netsca Netscape pe Naviga Navigator tor,..) ,..) kulla kullanar narak ak bu sayfay sayfayıı ekranınız ekranınızda da görüntülüyors görüntülüyorsunuz unuz.. Tanım Tanımda da geçen "internet "internet dökümanı" dökümanı" ifadesinin ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri (pascal, (pascal, basic,..) basic,..) gibi bir programlam programlama a mantığı mantığı taşımadığın taşımadığından dan öğrenilmesi öğrenilmesi gayet gayet kolay bir dildir. Dilden ziyade ziyade kabaca kabaca metinleri ya da verileri verileri biçimlendirmek, düzenlemek için kullandığı kullandığımız mız komutlar komutlar dizisi dizisi bile diyebiliriz diyebiliriz HTML için. için. HTML Öğreniyoru Öğreniyorum m yazı dizi dizimi mizi zi okuy okuyar arak ak bu dil dil hakk hakkın ında da hiçb hiçbir ir bilg bilgin iniz iz olma olmasa sa bile bile yazı yazını nın n sonu sonund nda a öğrendiklerinizle siz siz de kendi kendi sayfalarınızı hazırlayabileceksiniz. hazırlayabileceksiniz. Hazırsanız buyurun başlayalım...
2. HTML’ DE TEMEL UNSURLAR Bu sayfaya geldiğinize göre HTML öğrenme işinde ciddisiniz demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatt Hatta a sizd sizde e herh herhan angi gi bir bir HTML HTML edit editör örü ü bulu bulunm nmuy uyor orsa sa bu işi işi Wi Wind ndow ows' s'un un notep notepad' ad'ii ile dahi dahi halled halledebi ebilirs lirsini iniz. z. Piyas Piyasad ada a iki tip editör editör bulunuy bulunuyor or.. Birisi Birisi metin metin taba tabanl nlı, ı, kod kod yazma azmayyı gere gerekt ktir iren en faka fakatt bunu bunun n yanı anı sıra sıra ruti rutin n bazı bazı işle işleml mler erii kolaylaştıran editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You You See Is I s What You Get Get / Ne görü görürs rsen en onu onu alır alırsı sın) n) tarz tarzıı dene denen n kısa kısaca ca görs görsel el,, kodl kodlam amay ayla la uğra uğraşt ştır ırmay mayıı gere gerekt ktirm irmeye eyen n edit editör örle lerr (Fro (Front ntPa Page ge,, Drea Dreamw mwea eave verr, NetO NetObj bjec ects ts Fusion,..). Beni Benim m yeni yeni başl başlay ayan anla lara ra tavs tavsiy iyem em Wi Wind ndow ows' s'un un note notepa pad' d'i. i. Bu işle işleri rin n nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerek gerekebi ebilir lir.. Üsteli Üstelikk görsel görsel editör editörler ler bazen bazen istenm istenmeyen eyen kodla kodlarr ekliyo ekliyorla rlarr, bu da döküman boyutunun büyümesi demek. Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum farklarından dolayı sayfanız bir Browser'da iyi görünürken bir başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı teknikleri (css, dhtml gibi)sadece MS A.ÖZCAN – K.ERGİŞİ
-1–
HTML Ders Notları
Ağustos 2000
Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu yönleri var. Sonuçta, ne kadar kadar fiyakalı bir sayfa da yapsanız yapsanız elde ettiğiniz başarı başarı sayfanızı ziyaret ziyaret eden kişinin kişinin kullandığı kullandığı browser'a browser'a mahkum. mahkum. Hatta ziyaretçiniz ziyaretçiniz browser'ına browser'ına verdiği bir talimatla "yalnız şu fontu kullan", "grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir. Yine de bu kadar karamsar olmayalım. Bu kadar genel genel bilgi yeter. yeter. Bir sonraki sonraki konuda konuda ilk HTML sayfamızı yapıyoruz. yapıyoruz.
3. İLK SAYFAM İşte ilk HTML sayfamızı yapıyoruz. Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela html_ders" olsun. Daha sonra bu ad bize lazım olac lacağından kolayl aylık olması için siz de yeni klasöre bu adı verebilirsiniz. Şimdi de bu klasörü açıp yeni bir "metin belgesi" oluşturun (sağ ( sağ fare/Yeni/Metin fare/Yeni/Metin belgesi). Dosyayı çift tıklayarak tıklayarak açın ve şunları yazın: İlk Sayfam Sayfama Hoşgeldiniz Şimdi dosyayı kaydedin (Dosy (Dosya/ a/Fa Fark rklılı Kayd Kaydet. et...) ..).. Dosya Dosya adı adı kısm kısmın ına a şöy şöyle yazın azın:: "say "sayfa fa1. 1.ht htm" m" (tır (tırna nakl klar ar dahi dahil) l)ve ve Tamam amam'a 'a bası basın. n. Notepad'i kapatın, metin dosyasını silin ve oluş oluşan an yeni yeni dosya dosyayı yı açın açın.. Dosy Dosya a varsayılan browser'ınız (internet (internet explorer explorer,, netscape netscape navigator navigator gibi gibi)t )tar arafı afınd ndan an açıla açılaca cakt ktır ır.. Şöyl Şöyle e bir bir görüntü elde edeceksiniz. Tebrikler ebrikler ilk HTML sayfanızı sayfanızı yaptı yaptınız nız.. Şimdi Şimdi de bu belgey belgeyii nasıl nasıl oluştu oluşturdu rduğum ğumuzu uzu birlik birlikte te inceley inceleyeli elim. m. Birşey Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor. Etiket Etiketler ler etki etki etmesi etmesi isteni istenilen len metnin metnin önüne önüne ve arkası arkasına na yazıl yazılıyo ıyorr. Önce Önce etike etiketiti yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü (/) işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorundadır . Burada kullandığımız etiketler ve anlamları şöyle: A.ÖZCAN – K.ERGİŞİ
-2–
HTML Ders Notları
Ağustos 2000
....
Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.
.... ....
Bir HTML belgesi iki bölüme ayrılıyor: head(baş) ve body(gövde). body(gövde). .... .... etiketleri etiketleri arasına sayfa hakkında bilgiler yazıyoruz. Meta ve title gibi etiketler burada yeralıyor. Meta etiketlerine ileride değineceğiz. .... arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor y eralıyor..
....
Title sayfanın başlığını belirtiyor. Burada yazılanlar browser'ın üst tarafında browser adıyla beraber gösteriliyor.
Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani Yani metin biçi içimlendirmeye eye yaraya ayan hiçbir etiket kullanmadık. Bu yüzden dy>.... .... > ara arasın sına yazdı azdığı ğım mız "Say "Sayfa fama ma Hoşgel şgeldi dini nizz" yazıs azısıı browse browser'ın r'ın varsay varsayıla ılan n metin metin ayarla ayarlarıyla rıyla göster gösteriliy iliyor or.. İşin İşin ilginç ilginç tarafı tarafı hiçbir hiçbir kod yazma yazmadan dan sadec sadece e "Sayfam "Sayfama a Hoşgel Hoşgeldin diniz" iz" yazıp yazıp kaydet kaydetsek sek ve browse browser'd r'da a böyle böyle görünt rüntü ülese lesekk de aynı aynı netic ticeyi eyi elde lde edec decektik ktik.. Sonrak nrakii bölü bölümd mde e metin etin biçimlendirmeye yarayan etiketleri öğreneceğiz.
4. METİN BİÇİMLENDİRME Bu bölümde öğreneceğimiz etiketler: • Başlık etiketleri:
...
• Paragraf etiketi:
...
• Ortalama:
...
• Diğer etiketler: ...,...,... HTML'de metin stillerini üç şekilde belirleyebiliriz: 1. Düzenleme Düzenlemekk istediğimiz istediğimiz metnin metnin hemen hemen önüne önüne koyacağımı koyacağımızz bir etiketle etiketle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir. 2. Sayfa Sayfanın nın head (baş) (baş) kısmın kısmına a koyula koyulan n stille stillere re body (gövde) (gövde) bölümden bölümden atıf yapılarak metin biçimleme. 3. (Embedded (Embedded-Gömü -Gömülü lü biçimlendirm biçimlendirme) e) HTML dosyası dosyasının nın dışında dışında başka bir bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-(Yığılmalı Stil Kağıtları) deniyor. Kısaca CSS. Bu teknik A.ÖZCAN – K.ERGİŞİ
-3–
HTML Ders Notları
Ağustos 2000
bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor. veriyor. Biri Birinc ncii meto metott tta a her her metin metin için için ayrı ayrı ayrı ayrı stil stil beli belirti rtirk rken en ikin ikinci ci ve üçün üçüncü cü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar. Burada konumuz birinci metoda göre biçimle biçimlendi ndirmey rmeyii öğrenm öğrenmek. ek. Başlık Başlık etike etiketle tlerind rinden en başlıyo başlıyoruz ruz.. Notep Notepad' ad'ii açıyo açıyorr ve şunları yazıyoruz; Başlık Etiketleri
Başlık 1
Başlık 2
Başlık 3
Başlık 4
Başlık 5
Başlık 6
Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi html html,, head head,, titl title e etik etiket etle leri rini ni yerle erleşt ştir irdi dik. k. Say Sayfa başl başlığ ığıı (tit (title le)) olar olarak ak "Baş "Başlılıkk Etiketleri"ni seçtik ve sayfanın gövde (body) kısmına istediğimiz metinleri yazdık ve bu meti metinl nler erii h1'd h1'den en h6'y h6'ya a kada kadarr olan olan biçi biçiml mlen endi dirm rme e etik etiket etle leri rini nin n aras arasın ına a aldık. aldık. Browse Browserr metin metin biçiml biçimleme eme etiket etiketler lerii olan olan
...
...
> etiket etiketler lerii arasın arasındak dakii kelimelere belirli büyüklükler verdi. kendiniz
Şimd Şimdii de h1...h6
etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl olduğunu A.ÖZCAN – K.ERGİŞİ
-4–
HTML Ders Notları
Ağustos 2000
kavrayın. Hatta iyi bir deneme-yanılma olması açısından örneğin her seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek ne gibi etkiler oluşturduğunu gözlemleyin. Denemelerinizin bir kısmında hiçbir değiş değişikl iklik ik olmadı olmadığın ğınıı gözlem gözlemleye leyecek ceksin siniz iz bunun bunun sebebi sebebi,, browse browser'ın r'ınızı ızın n otomat otomatik ik olarak hatayı algılayıp düzeltmesidir. Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun: Başlık Etiketleri-2
Sayfama Hoşgeldiniz
HTML etiketleri ile,
Yazıları koyuitalik ve altı çizili olarak yazabiliyorum
Etiketleri kullanma mantığını anladınız herhalde. Biçimlendirmek istediğimiz metn etnin başın aşına a ilg ilgili ili etik etike eti yazıy azıyor oru uz ve metn metnin in sonun onunda da da ilg ilgili ili etik tiketi eti sonlandırıyoruz. Etiket biz sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek kaydedin ve diğer taraftan browser'ınızın reload/yenile tuşuna basarak değişiklikleri gözlemleyin. Yeni Yeni öğrendiğimiz kodlara bir göz atalım:
A.ÖZCAN – K.ERGİŞİ
-5–
HTML Ders Notları
Ağustos 2000
....
Aradaki metinleri sayfaya göre ortalar. center)
....
Aradaki metni koyu (bold)yazar.
....
Aradaki metni eğik (italic) yazar.
....
Aradaki metni altı çizili (underline) olarak yazar.
....
Başlık (heading) etiketi. h1 en büyük, h6 en küçük.
....
Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, Sonlandırıldığında, takib eden metin bir satır boşluk bırakılarak ve satır başına yazılır.
Başladığınız etiketi sonlandırmayı sakın unutmayın ! Burada bilmeyenler bilmeyenler için küçük küçük bir bilgi; bir bir html dökümanını açtığımızda açtığımızda ve ekra ekran n üzer üzerin inde de fare fareni nin n sağ sağ tuşu tuşuna na tıkl tıklay ayıp ıp kayna kaynağı ğı görü görünt ntül üle/ e/vi view ew sour source ce'u 'u seçtiğimizde internet explorer için notepad, netscape için kendi viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.
A.ÖZCAN – K.ERGİŞİ
-6–
HTML Ders Notları
Ağustos 2000
Öğrendiğiniz komutlarla yukarıdaki gibi bir sayfayı nasıl oluşturursunuz? Şu ana kadar yazılarımızın font ayarını a yarını browser'ın varsayılan fontu'na bıraktık. Bir sonr sonrak akii konud onuda, a, meti metin nlerd lerde e iste istedi diğ ğimiz imiz font fontu u nasıl asıl kulla llanac nacağım ağımız ızıı göreceğiz.
5. FONTLAR Font etiketinin kullanımı;
color=....> face= yazıtipinin adı (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ığı yada RGB renk değeri) Bunlara font etiketinin parametreleri deniyor.
etiketinin yanısıra öğreneceğimiz bir diğer etiket etiketi. Önce bu etiketin kullanımını göreceğiz. etiketi bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; 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ırd ırda dahi yazsanız browser açısından farketmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için etiketini kullanıyoruz. İstisnai etiketlerden birisi bu, etiketi sonlandırılmıyor. sonlandırılmıyor. Buna bir örnek verelim; BRetiketi pazartesi salı çarşamba ocak şubat mart nisan
Yukarıda ukarıdaki ki örneği örneğimiz mizde de "pazar "pazartes tesi,i, salı salı ve çarşamba çarşamba"yı "yı yazarken yazarken enter'la enter'la bir alt satıra satıra geçmemize geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer sefer ay adlar adlarını ını tek tek bir satıra satıra yazdığ yazdığımı ımızz halde halde bu kez brows browser er aradak aradakii A.ÖZCAN – K.ERGİŞİ
-7–
HTML Ders Notları
Ağustos 2000
etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere "enter" etkisini etiketiyle veriyoruz. Bu etiketin bir özelliği de sonlandır sonlandırılmama ılmaması. sı. Şimdi font etiketinin etiketinin kullanımın kullanımınıı bir örnekle örnekle inceleyeli inceleyelim. m. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce önce sistem sistemini inizde zde yüklü yüklü olan olan fontla fontları rı incele inceleyin yin (Başlat/Ayarlar/DenetimMasası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte kullandığım yazıtipleri (tahoma, comic sans ms, verdana, arial) sisteminizde yüklü değilse bunun yerine sizde olan istediğiniz fontu kullanabilirsiniz. Renkler ve Mevsimler İlkbahar Yaz color="#ff0000">Yaz Sonbahar color="#ffff00">Sonbahar Kış Her zamankinden farklı olarak ve ilk defa sayfamızda renk renk kull kullan andı dık. k. Örne Örnekt kte e de görd gördüğ üğün ünüz üz gibi gibi bu işi işi renk renk kodlarıyla yaptık. Aslında bunun bir yolu daha var o da ren renk kodu yerin rine ren rengin gin ingil ngiliz izccedek edekii adın dını yazma azmakk (color (color="re ="red" d" gibi). gibi). Bu konuyu konuyu renkle renklerr bölüm bölümünd ünde e ayrınt ayrıntılı ılı olarak inceleyeceğiz. Burada yalnız bir kaç örnekle yetinelim: Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green Bu renkleri yukarıdaki örnek örnek üzerinde deneyin, renk kodunu silin ve rengin ingilizce karşılığını yazın. Şu ana kadar kadar öğrend öğrendiği iğimiz miz etike etiketle tleri ri kullan kullanara arakk (tabii (tabii ki hepsi hepsini ni kullanmak zorunda değilsiniz) aşağıdaki görüntüyü browser'da nasıl elde ederiz?
6. LİSTELER HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;
Sıra Sıralı lı list listel eler er raka rakam m vey veya harf harf yada ada her her ikis ikisin inii içiç içiçe e kull kullan anar arak ak list liste e oluş oluştu turm rmam amız ızı, ı, sıra sırası sızz list listel eler er raka rakam/ m/ha harf rf yerin yerine e madd madde e imle imleri ri koya koyara rakk list liste e oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı okumayı kolaylaştır kolaylaştırmaya maya yardımcı yardımcı olabilecek olabilecek bir araçtır. araçtır. Sıralı listeler listeler Liste içine alınacak metinler ... etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise
(list item) etiketini getiriy iriyo oruz. Bu etik tikette tıpkı etiketi gibi sonlandırıl rılmıyo ıyor. etike etiketin tine e parame parametre treler ler ekleyeb ekleyebiliy iliyoru oruz. z. Bunla Bunlarla rla listem listemizin izin rakaml rakamla a mı harfle harfle mi başlaya ayacağını (typ type) yada ada hangi rakam/harfle başlaya ayacağını (st (start) belirt belirtebi ebiliyo liyoruz ruz.. Compac Compactt parame parametre tresi si ise listen listenin in mümkün mümkün olan olan minimu minimum m satır satır aralığına aralığına sahip sahip olmasını olmasını sağlıyor sağlıyor.. Bundan Bundan sonraki sonraki örneklerim örneklerimizde izde sayfa sayfa kodunun kodunun yalnı yalnızz body body (gövde (gövde)) bölüm bölümünü ünü vereceğ vereceğiz. iz. Kodun Kodun geri geri kalan kalan kısıml kısımların arınıı kendi kendi sayfanızda tam olarak yazmayı unutmayın.
Kimya
İnorganik
Analitik
li>Fizik
Dinamik
Statik
li>Matematik
Sayılar
Diğer
Türev li>İntegral
1. Kimya a. Organik b. İnorganik c. Analitik 2. Fizik a. Dinamik b. Statik 3. Matematik a. Sayılar b. Diğer i. Türev ii. İntegral
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. Dikkat edeceğimiz nokta, işe etiketi ile başlayıp liste maddelerinin her birisinin başına
etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde
etiketini yazmak. Liste Liste içinde içinde yeni yeni bir liste liste oluştu oluşturma rmakk istedi istediğim ğimizd izde e listel listelene enecek cek madded maddeden en sonra sonra tekrar tekrar etike etiketin tinii yazıyo yazıyoruz ruz ve bahse bahsedil dilen en kurall kuralları arı aynen aynen uygulu uyguluyo yoruz ruz.. Type ype parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler sayılar,harfler (küçük/büyük)ve (küçük/büyük)ve romen rakamları (i,ii,iii gibi)
A.ÖZCAN – K.ERGİŞİ
-9–
HTML Ders Notları
Ağustos 2000
Sırasız Listeler Bu tip listede listede de mantık aynı. Fark, Fark, listeleme listeleme yaparken yaparken maddelerin maddelerin başına başına harf, rakam rakam gibi unsurlar unsurlar yerine yerine küçük küçük yuvarlakla yuvarlaklar, r,kare kareler ler kullanabil kullanabilmemiz memiz.. etiketi etiketi yerine
etiketini kullanıyoruz, maddeler için kullandığımız
etiketi burada da geçerli. için parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş dair daire) e),, squa square re (içi (içi dolu dolu kare kare). ). Comp Compac actt para parame metr tres esii sıra sırası sızz list listel eler erde de de kullanılabiliyor.
type="disc">
Kimya
İnorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
İntegral
•
Kimya
•
Organik İnorganik Analitik
Fizik Dinamik Statik Matematik Sayılar Diğer Türev o o İntegral
•
Tanımlama listeleri Bu listelemede kullanılan etiketler şöyle;
...
,
...
,
...
Listenin maddelerini belirtmek için kullandığımız
etiketinin yerini burada
ve
etiketleri etiketleri alıyor alıyor. Aynı Aynı şekilde şekilde ...... veya veya
...
...
etiketleri etiketleri arasına arasına aldığımız listeyi bu sefer
...
arasına yazıyoruz. Yine parametre olarak
etiketi içinde compact ifadesini kullanabiliriz. Hemen örneğimize geçelim,
A.ÖZCAN – K.ERGİŞİ
- 10 –
HTML Ders Notları
Ağustos 2000
HTML (HyperText Markup LanguageHareketli-Metin Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir...
HTML'de Temel Unsurlar
Bu color="black">Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren...
Listeler color="blue">Listeler
Sıralı color="black">Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar...
Neler öğrendik? HTML nedir? HTML (HyperText (HyperText Markup Language-Hareketli-Metin Language-Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir... HTML'de Temel Unsurlar Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör.Piyasada editör.Piyasada iki tip editör bulunuyor. bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren... Listeler Sıralı listeler rakam veya harf yada her ikisini içiçe i çiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri i mleri koyarak liste oluşturmamızı sağlar...
7. RENKLER Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik. Şimdi daha ayıntı ayıntılılı olarak olarak ve bu işin işin mantığ mantığına ına inerek inerek yenid yeniden en ele alacağ alacağız. ız. Aynı Aynı zamand zamanda a sayfamıza artalan rengi vermeyi öğreneceğiz. Bu bölümde öğreneceğimiz konular: Renk kodları Artalanı renklendirmek Renk Kodları Fontlar konusunda, metnin reng rengin inii beli belirle rlerk rken en > etik etiket etin inii kull kullan anmı mışt ştık ık ve colo colorr komu komutu tunu nun n karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım. Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır. A.ÖZCAN – K.ERGİŞİ
- 11 –
HTML Ders Notları
Ağustos 2000
Bunlar Bunlardan dan bilgis bilgisayar ayar alanın alanında da kullan kullanılan ılan iki tanes tanesii ikili ikili (binary (binary)) ve onaltıl onaltılıı (hexadecimal) sayı sistemleridir. sistemleridir.
Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar; 0123456789ABCDEF [10'un karşılığı A ... 15'in karşılığı F'dir.] F'dir.] Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızıyeşil-mavi yeşil-mavi)) renklerinin renklerinin karışım karışım oranlarını oranlarını belirtir belirtir.. Bu renklerden renklerden herbirinin herbirinin alacağı alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır. beyaz'dır. Diğer Diğer renkleri renkleri sayıları değiştirerek kendiniz deneyebilirsiniz. #000000=black(siyah)
Artalanı renklendirmek Bu renk renkle lerl rle e yalnı alnızzca meti metin nleri leri değil ğil say sayfamı famızzın arta rtalan lananın anınıı da renklendirebiliriz. Bunun için etiketini kullanıyoruz. Daha doğr doğrus usu u say sayfamı famızı zın n gövd gövdes esin inii beli belirt rtme mekk için için yazdı azdığı ğımı mızz etik etiket etin ini, i, şeklinde değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın ! color="#ffffff">
Günler
Pazartesi
Salı
Çarşamba
Perşembe
Cuma
Cumartesi
8. RESİMLER A.ÖZCAN – K.ERGİŞİ
- 13 –
HTML Ders Notları
Ağustos 2000
Renkleri de öğrendikten sonra geldik en heyecanlı konuların bir diğerine, evet bu konuda sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz. Bu konu aslında tablolar ve bağlantılarla da alakalı, bu yüzden burada genel olarak işleye işleyeceğ ceğiz. iz. Resim Resim seçimi seçiminde nde,, seçti seçtiğim ğimiz iz resmin resmin gif yada yada jpg format formatınd ında a olması olması zorunl zorunlulu uluğu ğu dışınd dışında a herha herhangi ngi bir kısıtla kısıtlama ma yok. yok. Resim Resim eklem ekleme e işi gayet kolay. kolay. Yapma apmamı mızz gere gereke ken n brow browse ser' r'a a say sayfaya faya koy koyacağ acağıı resm resmin in nere nerede de oldu olduğu ğunu nu göstermek göstermekten ten ibaret. Her ne kadar şart olmasa olmasa da resmin resmin pixel cinsinden cinsinden en ve boy uzunluğun uzunluğunu u belirtmeniz belirtmeniz sizin hayrınıza hayrınıza olacaktır olacaktır.. Kullanaca Kullanacağımız ğımız etiket etiket şu şekilde şekilde olacak; Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz. Dikkat edilecek hususlar:
Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir soru: bu resmin resmin nered nerede e olduğu olduğunu nu browse browser'a r'a nasıl nasıl izah izah ederiz ederiz?Diy ?Diyeli elim m ki resmim resmimizi izin n adı kedi.gif eni 64, boyu da 79 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı: Fakat siz diyorsunuz ki; benim bir sürü eklemek istediğim resmim var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız; Bölü işaretinin işaretinin yönüne yönüne dikkat edin. edin. Bu windows'ta windows'ta ya da dos'ta dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret ettiğiniz internet adreslerini hatırlayın. Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir klasör var ve kedi.gif dosyası o klasörde, diyelim ki klasörün adı da gifler olsun. Bu durumda kedi. kedi.gif gif'in 'in harddi harddiski skimiz mizdek dekii yolu yolu da c:\html_ders\resim\gifler\kedi.gif şeklinde olacak. Etiket tahmin ettiğiniz gibi şu şekilde olmalı: A.ÖZCAN – K.ERGİŞİ
- 14 –
HTML Ders Notları
Ağustos 2000
Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz. Fakat üst dizinlere nasıl ulaşacağız? O da kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün içine koyalım, mesela klasörün adı da html olsun -umarım karıştırmazsınız. Kedicik bulunduğu gifler klasöründe kalsın. Son durum şöyle olacak; c:\html_ders\html\deneme.htm yolunda html dökümanımız, c:\html_ders\resim\gifler\kedi.gif yolunda resim var. İzleme İzlememiz miz gereke gereken n yol şöyle; şöyle; browse browser r deneme.htm dosyasının bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine oradan gifler dizinine girmeliyiz. Üst dizine çıkmayı ../ ifadesiyle belirtiyoruz. Bu şekilde ardarda ../ ifadesiyle i fadesiyle istediğimiz kadar üst dizine geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi if adesi işimizi görecektir.
Resmi Hizalama Resim artık sayfamızda, fakat daima hep solda duruyor. Bir hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left) alabiliriz.iyi ama resim zaten solda değil miydi?Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır.
Artalana resim koyalım Artalanı renklendirmeyi öğrenmiştik; ifad ifades esiyl iyle e bu işi işi kolay kolayca ca yapıy yapıyor ordu duk. k. Bu ifad ifadey eyii şu şekilde yazarsak resmimiz artalana döşenecektir.
Kull Kullan andı dığı ğımı mızz resm resme e yakı yakın n tond tonda a bir bir reng rengii bgco bgcolo lorr ifad ifades esin inin in karş karşıs ısın ına a yazmay yazmayıı ihmal ihmal etmeme etmemekk yine yine bizim bizim hayrım hayrımıza ızadır dır.. Bunun Bunun yanınd yanında a backgr backgroun ound d ifadesinin ifadesinin karşısına karşısına yukarıda yukarıda anlattığımı anlattığımızz kurallar kurallar çerçevesi çerçevesinde nde istediğimiz istediğimiz resmi
A.ÖZCAN – K.ERGİŞİ
- 15 –
HTML Ders Notları
Ağustos 2000
koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya sa yfaya yerleştirilecektir. yerleştirilecektir.
Resme alternatif metin eklemek Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece meti metinl nler erii göst göster erme mekk üzer üzere e aya ayarlam rlamış ışsa sa,, resi resim m yerin erine e alte altern rnat atif if açık açıkla lama ma görün görüntül tülene enecek cektir tir.. alt=". alt=".." ." parame parametre tresiyl siyle e açıkl açıklama ama ekliyo ekliyoruz ruz,, bu açıkla açıklama ma aynı aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir.
Son bir örnekle bu konuyu bitirelim,
Gökyü Gökyüzü zünü nü arta artala lana na koya koyalılım, m, dünya dünyayı yı da orta ortala lana naca cakk şeki şekild lde e sayf sayfay aya a yerleştirelim.
background="bulut.jpg">
Eğer hala yapmadıysanız resimlere sağ tıklayıp (Resmi farklı kaydet../Save image as..) seçeneğiyle bu resimleri harddiskinize kaydedebilirsiniz. Şu ana kadar öğrendiğimiz komutlarla yerleştirme işlemini ancak bu kadar yapabiliyoruz. Daha sonraki konularda tabloları kullanarak istediğimiz düzeni sağlamayi öğreneceğiz. A.ÖZCAN – K.ERGİŞİ
Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara. Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi bizi iste istedi diği ğimi mizz yere yere götü götüre rece cekt ktir ir.. HTML HTML'd 'de e meti metinl nler ere e ve resi resiml mler ere e bağl bağlan antı tı kazand kazandırm ırmak ak mümkün mümkündür dür.. Örnek Örnek için için bu sayfay sayfayıı incele incelemen meniz iz yeterl yeterli.i. Sol taraft tarafta a konuları veren bir menü bölümü var. Siz Siz bu bağl bağlan antıl tılar arda dan n biris birisin inii tıkl tıklad adığ ığın ınız ızda da ilgi ilgilili konu konu açıl açılıyo ıyorr, sayf sayfa a sonl sonlar arın ında daki ki iler ilerii-ge geri ri düğm düğmel eler eriy iyle le de bağl bağlan antı tıla larr oluş oluştu turu rulm lmuş uş,, bunl bunlar ar da tıkl tıklan andı dığı ğınd nda a ilgi ilgilili sayf sayfa a açılı açılıyo yorr. Bu yolla yolla başk başka a nele nelerr yapı yapıla labi bililir? r? Ses, Ses, graf grafik ik dosyal dosyaları arı,, sıkışt sıkıştırıl ırılmış mış dosyal dosyalar ar,, intern internet et adresl adresleri eri,.. ,.. bunlar bunların ın hepsin hepsine e bağla bağlantı ntı kazand kazandırm ırmak ak mümkün mümkün.. Hatta Hatta yapac yapacağı ağımız mız bağlan bağlantı tı sayfa sayfa içinde içinde,, yani yani dahili dahili bir bağlantı da olabilir. Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim: ... Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkü mümkün. n. Şimdi Şimdi aşağıd aşağıdaki aki örnekl örnekleri eri birlik birlikte te inceley inceleyeli elim, m, fakat fakat önceli öncelikle kle bir kuralı kuralı belirt belirteli elim; m; ... ... > etiket etiketii arasın arasına a yazdığ yazdığımı ımızz yazıla yazılarr bağlan bağlantı tı özelli özelliğin ğine e sahip sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.
buraya tıklandığında meyve resmi açılacak Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmin resminii açacak açacaktır tır.. Tabii abii ki dosya dosya farklı farklı bir dizind dizinde e ise kullan kullanıcı ıcı hata hata mesajıyla karşılaşır. karşılaşır.
sıkıştırılmış midi dosyalarını çekmek için tıklayın İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazıs yazısına ına bağlan bağlantı tı özelliğ özelliğii kazand kazandırd ırdık. ık. Fakat Fakat dosya dosya tipind tipinden en kaynak kaynaklan lanan an bir fark var; ilk örnekte meyve.gi meyve.gif'e f'e tıklandığında tıklandığında browser browser resmi açacaktır açacaktır fakat bu A.ÖZCAN – K.ERGİŞİ
- 17 –
HTML Ders Notları
Ağustos 2000
örnekte browser browser kullanıcıya midi.zip midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir. görüntüleyememesidir.
kedi resmi href="resim/bitki/karanfil.gif"> işte çok güzel bir karanfil href="../araba/bmw.jpg"> otomobil resimleri Bu 3 örnekt örnekte e altdiz altdizinl inlere ere/üs /üstdi tdizin zinler lere e verile verilen n bağla bağlantıy ntıya a misall misaller er görüyo görüyorsu rsunuz nuz,, resimler konusunda gördüğümüz kurallar burada da geçerli.
href="http://www.benimsitem.com href="http://www.benimsitem.com/"> /"> tıklayın sitemi ziyaret edin Yedinci örnekte bir internet adresi verdik.
[email protected]"> mail atın Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
...... Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konu açılsın. Böyle bir sayfa hazırlamak için yapacağımız şeyler: 1. "tıklandığ "tıklandığında" ında" açılaca açılacakk konuyu işaret işaretlemek lemek ... ...">... browse ser'a r'a,, hazı hazırl rlaya ayaca cağı ğımı mızz menüy menüye e "tık "tıkla land ndığ ığın ında da"" bu işar işaret etlili konuy konuya a 2. brow gitmesini bildirmek....
Resimlere bağlantı özelliği kazandırmak Metinl Metinlere ere bağlan bağlantı tı vermey vermeyii öğrend öğrendik, ik, peki peki sayfad sayfadaki aki resiml resimlere ere nasıl nasıl link link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız
etiketini ... etiketinin arasına alıyoruz. İşte örnek;
> resim.gif tıklanacak tıklanacak resmi, resmi, sayfa1.htm resme resme tıklan tıklandığ dığınd ında a açılac açılacak ak sayfay sayfayıı gösteriyor. "Border" komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.
Target parametresi Son Son olar olarak ak bağl bağlan antı tını nın n açıla açılaca cağı ğı penc pencer erey eyii beli belirtm rtmek ek için için kull kullan anıla ılan" n"ta targ rget et"" parametresini öğrenelim; Kullanımı:
Bağlantı yeni bir pencerede açılır. Bağlantı aynı pencere içerisinde açılır. Bağlantı aynı pencere içerisinde en üstten itibaren açılır. Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.("Çerçeveler" konusunda ayrıntılı olarak değineceğiz.)
- 20 –
HTML Ders Notları
Ağustos 2000
10. TABLOLAR
...
Tablola ablolarr, sayfal sayfaları arı satırla satırlara/ ra/süt sütunl unlara ara bölme bölmekk ya da metin metin veya veya grafik grafikler lerin in sayfad sayfada a istedi istediğim ğimiz iz yerde yerde durmas durmasını ını sağla sağlamak mak amaçla amaçlarıyl rıyla a kullan kullanabi abilec leceği eğimiz miz HTML'n HTML'nin in en önemli önemli yapıta yapıtaşla şların rından dandır dır.. Sayfad Sayfada a gözük gözüksün sün ya da gözükm gözükmesi esin n tabl tablol olar arıı bir bir iske iskele lett gibi gibi kulla kullana nabi bilir lir,, böyl böylec ece e şu ana ana kada kadarr öğre öğrend ndik ikle lerin riniz izle le yapa yapamay mayac acağ ağın ınız ız gerç gerçek ek düze düzenl nlem emey eyii yapa yapabi bilir lirsi sini niz. z. Elbe Elbett tte e HTML HTML dizay dizayn n konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek. İşte tablolar, tablolar, Sonbahar Kış Eylül Aralık Ekim Ocak Kasım Şubat
İlkbahar Yaz Mart Haziran Nisan Temmuz Mayıs Ağustos
Tabloyu renklendirelim, Sonbahar Eylül Ekim Kasım
Kış Aralık Ocak Şubat
İlkbahar Mart Nisan Mayıs
Yaz Haziran Temmuz Ağustos
Başka bir örnek (farklara dikkat ediniz)
ÖLÇÜLER 1. 2. 3.
A.ÖZCAN – K.ERGİŞİ
Zafer Mustafa Osman
Boy 1.77 1.82 1.75
Kilo 80 75 83
- 21 –
HTML Ders Notları
Ağustos 2000
Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz: Tablo Başlığı (thead) hücre hücre hücre
Sütun Sütun Sütun Sütun Başlığı Başlığı Başlığı Başlığı #1 #2 #3 #4 hücre hücre
hücre hücre hücre
hücre hücre
Tablonun alt yazısı(caption)
Bu kadar kadar örnek örnek yeterl yeterli,i, şimdi şimdi basit basit bir tablo tablo yapma yapmakk için için gerekl gereklii etiket etiketler lerii öğrenelim öğrenelim.. Öncelikle Öncelikle
......
> etiketlerin etiketlerinii yazıyoruz yazıyoruz ve arasını arasını doldurmay doldurmaya a başlıyoruz.
> etiket etiketind inden en sonra sonra ilk olarak olarak
etiket etiketiyl iyle e ilk satırı satırı oluştu oluşturuyo ruyoruz ruz.. Oluştu Oluşturma rmakk istedi istediğim ğimiz iz sütun sütun kadar kadar
etiket etiketii yazıy yazıyoruz oruz..
...
...
> etiket etiketler lerii aras arasın ına a metin metin yada yada graf grafik ik () >) koya koyabi bilir liriz iz.< .
> etik etiket etle leri ri ile ile sütu sütunl nlar arıı oluşturduktan sonra
etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci, üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz. u yguluyoruz.
Tabloda başlık ve gövde Tablola ablolarr da HTML HTML sayfası sayfasında nda olduğu olduğu gibi gibi başlık başlık (head) (head) ve gövde gövde (body) (body) bölümlerine ayrılabilir. Tabloda başlığı gövdeyi etiketleri arasına yaza yazarız rız.. n> etik etiket etii ile ile ikin ikinci ci bir bir açık açıkla lama ma verm vermek ek mümk mümkün ündü dürr. Sütu Sütun n başlıklarına gelince, her bir başlık
etiketi ile belirtilir ve bunlar etiketinde olduğu gibi gibi
...<
...
/tr> arasın arasına a yazılır yazılır.. Tabloda abloda satır satır ve sütunl sütunları arı belirt belirten en
ve
etiketleri
... arasına alınır. Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;
parametr etresi esi çerçev çerçeveni enin n kalın kalınlığ lığını ını belirti belirtirr. border border=0 =0 çerçev çerçeveni enin n Border param görünmemesini sağlar.
hücre
hücre
hücre
hücre
hücre
hücre
hücre
hücre
Cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar. A.ÖZCAN – K.ERGİŞİ
- 24 –
HTML Ders Notları
hücre
hücre
hücre
Ağustos 2000
cellpadding="0">
hücre
cellpadding="5">
hücre
cellpadding="10">
hücre
Cellspacing parametresi hücreler arası marjı belirler.
Width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy boy uzun uzunlu luğu ğunu nu beli belirt rtir ir.. Tablo ablonu nun n değe değerr veri verilm lmed ediğ iğin inde de sahi sahip p oldu olduğu ğu norm normal al ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz. hücre1 hücre2
hücre1
hücre2
A.ÖZCAN – K.ERGİŞİ
- 26 –
HTML Ders Notları
Ağustos 2000
hücre1 hücre2
hücre1
hücre2
hücre1 hücre2
hücre1
hücre2
etiketi için parametreler
Bgcolor parametresi hücreyi renklendirmede kullanılır. hücre1 hücre2 hücre3 hücre4
A.ÖZCAN – K.ERGİŞİ
hücre1
bgcolor="#ff0000">hücre1
hücre2
bgcolor="#00ff00">hücre2
hücre3
bgcolor="#0000ff">hücre3
hücre4
bgcolor="#ffff00">hücre4
- 27 –
HTML Ders Notları
Ağustos 2000
Background parametresi ile hücreye grafik-artalan yerleştirebiliriz.
hücre1 hücre2 hücre3 hücre4
cellpadding="7">
hücre1hücre1
hücre2hücre2
hücre3hücre3
hücre4hücre4
Width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçe geçerli rli olac olacak aktı tırr. Aynı Aynı şeki şekild lde e tek tek satı satırlı rlı tabl tablod oda a widt width h değe değeri rini ni her her hücr hücre e için için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır. hücre1 hücre2 hücre3
hücre4
cellpadding="7">
hücre1
height=20>hücre1
hücre2
height=40>hücre2
hücre3
height=60>hücre3
hücre4
height=80>hücre4
A.ÖZCAN – K.ERGİŞİ
- 28 –
HTML Ders Notları
hücre1
Ağustos 2000
hücre2
hücre3
hücre4
cellpadding="7">
hücre1
hücre2
hücre3
hücre4
Align parametresi hücre içinde yatay hizalama hizala ma yapar.
hücre1 hücre2 hücre3
cellpadding="7">
hücre1
hücre1
r>
hücre2
align="center">hücre2
hücre3
hücre3
tr>
Valign parametresi hücre içinde düşey hizalama yapar.
hücre1
hücre2
hücre3
cellpadding="7">
hücre1
valign="top">hücre1
A.ÖZCAN – K.ERGİŞİ
- 29 –
HTML Ders Notları
Ağustos 2000
hücre2
valign="middle">hücre2
hücre3hücre3
d>
Hücreleri Birleştirme
Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için için de rowspa rowspan n parame parametre tresin sinii kulla kullanıyo nıyoruz ruz.. Birleş Birleştiri tirilen len hücrey hücreye e ait
..<
..
> etiketini siliyoruz.
A
B
C
D
E
F
G
H
I
J
K
L
cellpadding="12">
A
B
C
D
E
F
G
H
I
J
K
L
Yukarıdaki tabloda; A ve B hücrelerini birleştirmek için A hücresine ait
etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait
B
etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait
etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait
F
,
G
etiketlerini siliyoruz.
A
C
E I
D H
J
K
A.ÖZCAN – K.ERGİŞİ
L
- 30 –
HTML Ders Notları
Ağustos 2000
cellpadding="12">
A
C
D
E
H
I
J
K
L
Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait
etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait
I
etiketini siliyoruz. C G ve K hücr hücrel eler erin inii birle birleşt ştirm irmek ek için için C hücr hücres esin ine e ait ait
etik etiket etin ine e rows rowspa pan= n=3 3 parametresini ekliyoruz ve G ve K hücrelerine ait
G
,
K
etiketlerini siliyoruz. A
B F
D C
H
E J
L
A
B
C
D
E
F
H
J
L
11. ÇERÇEVELER Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm sürüm browse browser'l r'lar ar çerçev çerçeve e kullan kullanılmı ılmışş bir sayfay sayfayıı görünt görüntüley üleyeme emezle zlerr. (Micro (Microsof softt Inte Intern rnet et Expl Explor orer er 3.0 3.0 ile ile Nets Netsca cape pe Navi Naviga gato torr 2.0 2.0 ve üstü üstü sürü sürümle mleri ri fram framel eler erii destekliyor). Bunun yanında çerçeve kullanımına karşı düşmanca (!) tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala birçok site, ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği sunuyor. Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre göre deği değişt ştirm irme e imka imkanı nı veri verirr (bu (bu sayf sayfal alar arda da oldu olduğu ğu gibi gibi). ). Bunu Bunun n anla anlamı mı ise ise kullanılac kullanılacak ak çerçeve çerçeve miktarınca miktarınca ek HTML sayfası oluşturmak oluşturmak demektir demektir.. Browser Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir. verecektir. Aşağıdaki örneği inceleyelim:
A.ÖZCAN – K.ERGİŞİ
- 31 –
HTML Ders Notları
Ağustos 2000
Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor bildiri yor.. etiketi ile htm1.htm dosyasının artalan rengi kırmızı, htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi. Şimdi bu çerçeveyi birlikte oluşturalım: frame.htm dosyası: Çerçeveler <body> </body>
htm2.htm dosyası: dosyası : htm htm2.htm; 2.htm;
Çerçev Çerçeve e oluştu oluşturma rmada da kullan kullandığ dığımı ımızz etiket etiket frames frameset, et, cols cols ifades ifadesii açılac açılacak ak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row> yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır. Cols (sütunlar) Rows(satırlar)
A.ÖZCAN – K.ERGİŞİ
- 32 –
HTML Ders Notları
Ağustos 2000
cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirli yoruz, buraya buraya örneği örneğin n cols=" cols="140 140,50 ,500" 0" gibi gibi sayı sayı yazıla yazılabil bilir ir,, cols=" cols="25% 25%,75 ,75%" %" ile browse browser r penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada yada (*) sembol sembolü ü ile açılac açılacak ak çerçev çerçeveni enin n ebadı ebadı browse browser'a r'a bırakı bırakılır lır,, cols=" cols="140 140,*" ,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin i kincinin ise ebadının browser'a bırakıldığını gösteriyor. Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar. frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kull kullan anab abililme mekk amac amacıy ıyla la isim isim (nam (name) e) verm vermey eyii sağl sağlıy ıyo or (bu (bu konu konuyya aşağ aşağıd ıda a değin değinece eceğiz ğiz). ). src pencer pencerede ede görünt görüntüle ülenec necek ek html html dosya dosyasın sının ın yerini yerini göster gösteriyo iyorr. "resimler" "resimler" bahsinde bahsinde belirttiğimiz belirttiğimiz yer (kaynak) (kaynak) gösterme gösterme kuralları kuralları burada da geçerli. geçerli. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz. Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz. FRAMESET etiketini HTML dosyanızın ... etiketleri arasında kullanmayı unutmayın !!.
FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar; fram frameb ebor orde der= r=". ".." ." (ye (yes, no) no) görünmeyeceğini belirler.
Çerç Çerçev evel eler er aras arasın ında daki ki sını sınırr
çizg çizgis isin inin in görü görünü nüp p
border=".." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler x
Noresize Pencere boyutlarının sabit olmasını sağlar.
Daha karmaşık çerçeveler Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün. Bu etkiy etkiyii sağl sağlam amak ak için için FRAM FRAMES ESET ET etik etiket etin inii açıp açıp kayn kaynak ak dosy dosyal alar arın ın heps hepsin inii belirt belirtmed meden en yeni yeni bir FRAMES FRAMESET ET açıyo açıyoruz ruz,, içiçe içiçe açtığı açtığımız mız bu etike etiketle tlerin rin kaynak kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz. Örnekl Örnekleri eri ve yanla yanların rındak dakii kodlar kodlarıı inceley inceleyip, ip, farklı farklı çerçev çerçeve e türler türlerini ini kendi kendi bilgisayarınızda oluşturmaya çalışın.
Çerçev Çerçeve e konusu konusu ile birlik birlikte te " HTML öğreniyorum" yazı yazı dizi dizimi mizz sona sona erdi erdi,, buraya buraya kadar kadar öğren öğrendik dikler lerini inizle zle intern internett ette e siz de kendin kendinize ize ait sayfal sayfaları arınız nızıı inşa inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçti geçtiğin ğinii sakın sakın unutmay unutmayın ın,, hoşun hoşunuza uza giden giden sitele sitelerin rin dizayn dizayn mantığ mantığını ını anlamay anlamaya a çalışın, hatta bunun için kaynak kodlarını inceleyin. Görsel editörleri kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın. Linkler kısmında benim hoşuma giden, aynı zamanda bizzat yararlandığım sitelere yer verdim, burayı bura yı da inceleyebilirsiniz.
Şu an an elinizd elinizde e bulunan bulunan notlar www.webteknikleri.com adresinden alınarak derle derlenmi nmişş ve sizler sizlerin in kullan kullanımı ımına na sunul sunulmuş muştur tur.. Web Web Teknikl eknikleri eri Ekibin Ekibine e böyle böyle bir kaynak hazırladıkları için için teşekkürü teşekkürü bir borç biliyoruz. TEŞEKKÜRLER.....
HTML DERS NOTLARI............................................................................................... NOTLARI...............................................................................................1 HTML ‘ E GİRİŞ............................ ........................................................... ............................................................. ................................................. ................... 1 1. HTML NEDİR ?....................... .............................................. .............................................. .............................................. ............................................... ........................ 1 2. HTML HTML’’ DE TEMEL UNSURLAR ........ ................ ................ ................ ................ ................. ................. ................ ................ ............. ......... ........ .... 1 3. İLK SA SAYF YFAM AM........ ................ ................ ................ ................ ................ ................. ................. ................ ................ ................ ................ ................ ............. ......... ........ ........ 2 4. METİN BİÇİMLENDİRM BİÇİMLENDİRME E .............................. ..................................................... .............................................. ........................................... .................... 3 5. FONTLAR............................. ..................................................... ............................................... .............................................. ........................................... .......................... ...... 7 6. LİSTELER............................................... ...................................................................... .............................................. .............................................. ................................ ......... 8 A.ÖZCAN – K.ERGİŞİ
Fakat siz diyorsunuz ki; benim bir sürü eklemek istediğim resmim var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız; 
Bölü işaretinin işaretinin yönüne yönüne dikkat edin. edin. Bu windows'ta windows'ta ya da dos'ta dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret ettiğiniz internet adreslerini hatırlayın. Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir klasör var ve kedi.gif dosyası o klasörde, diyelim ki klasörün adı da gifler olsun. Bu durumda kedi. kedi.gif gif'in 'in harddi harddiski skimiz mizdek dekii yolu yolu da c:\html_ders\resim\gifler\kedi.gif şeklinde olacak. Etiket tahmin ettiğiniz gibi şu şekilde olmalı: 
A.ÖZCAN – K.ERGİŞİ
Bu şekilde ardarda ../ ifadesiyle i fadesiyle istediğimiz kadar üst dizine geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi if adesi işimizi görecektir.
