Transcript HTML (HyperText Markup Language)
HTML
(HyperText Markup Language)
HAYATI TANIMAK İÇİN İNTERNET; TANITMAK İÇİN KİŞİSEL BİR WEB
Giriş
HTML nedir?
Daha hızlı dönen bu yeni dünyada hobi ya da gereksinimden bu dile ihtiyaç var!
Bu dilin Kolaylıkları ve Zorlukları
Gündem
Bir web sitesi oluşturmak için günümüz teknolojisinde farklı yazılımlar ve bu siteleri paket olarak hazırlayan şirketler bulunmaktadır. Bir web sitesinin gerek hobi amaçlı tanıtım(genellikle gerekse kazanç önemli bir yer teşkil eder.
reklam düşüncesi) amaçlı yapılması, tanıtılması piyasalarda
1.1.HTML NEDİR ?
HTML (HyperText Hareketli-Metin Markup İşaretleme HTML, Language Dili) görebileceğimiz, / basitçe, browserlarla bağlantınız olmasa bile bu internet dökümanları oluşturmaya yarayan bir çeşit dildir. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet belgeleri görüntüleyebilirsiniz.
dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından programlama öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisidir diyebiliriz.
1.2. HTML'DE TEMEL UNSURLAR
HTML nispeten kolay bir dildir. 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. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un notepad'i ile dahi halledebilirsiniz.
iki bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen Piyasada editörler tip editör editörler(HotDog, (FrontPage, Dreamweaver, NetObjects Fusion,..).
1.2. HTML'DE TEMEL UNSURLAR
Belgeyi nasıl oluşturduğumuzu anlamları genel olarak şöyledir: birlikte inceleyelim. Kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazıyoruz. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor.
Önce etiketi 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. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda. Burada kullandığımız etiketler ve
1.3. BAŞLIYORUZ
!
1.4. İLK SAYFAMIZI YAPALIM
1.
Ö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 olacak.
2. Şimdi de bu klasörü açıp yeni bir "metin belgesi" oluşturun (sağ fare/Yeni/Metin belgesi).
3. Dosyayı çift tıklayarak açın ve şunları yazın:
1.4. İLK SAYFAMIZI YAPALIM
1.4. İLK SAYFAMIZI YAPALIM
4. Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...).
Dosya adı
kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil)ve
Tamam
'a basın 5. Notepad'i kapatın, metin dosyasını silin ve oluşan yeni dosyayı açın. Dosya varsayılan browser'ınız (internet explorer, netscape navigator gibi) tarafından açılacaktır. Şöyle bir görüntü elde edeceksiniz.
1.4. İLK SAYFAMIZI YAPALIM
1.4. İLK SAYFAMIZI YAPALIM
Böylece ilk HTML sayfamızı yapmış olduk. Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim.
Kelimeleri küçük "
<
" ve büyük "
>
" sembolleri arasına yazıyoruz. Bu ifadelere etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi 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. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.
Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden arasına yazdığımız
tag (etiket)
"Sayfama deniyor. Etiketler etki
....
Hoşgeldiniz" browser'ın varsayılan metin ayarlarıyla gösteriliyor.
yazısı
1.5.1.
METİN BİÇİMLENDİRME
Bu bölümde öğreneceğimiz etiketler: Başlık etiketleri:
... Paragraf etiketi:
...
Ortalama :1.5.2. METİN BİÇİMLENDİRME
HTML'de metin stillerini üç şekilde belirleyebiliriz: 1. Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir.
1.5.3. METİN BİÇİMLENDİRME
2. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme) 3. HTML dosyasının dışında başka bir stil dosyası oluşturarak til için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.
1.5.4. METİN BİÇİMLENDİRME
Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri 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 biçimlendirmeyi öğrenmek....!
metoda göre
1.5.5. METİN BİÇİMLENDİRME
Başlık etiketlerinden başlıyoruz.
Notepad'i açıyor ve şunları yazıyoruz;
Başlık1
Başlık2
Başlık3
Başlık4
Başlık5
Başlık6
1.5.6. METİN BİÇİMLENDİRME
1.5.7. METİN BİÇİMLENDİRME
Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi html, head, title etiketlerini yerleştirdik. Sayfa başlığı gövde
(body) (title)
olarak "Başlık Etiketleri"ni seçtik ve sayfanın kısmına istediğimiz metinleri yazdık ve bu metinleri h1'den h6'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan
...
etiketleri arasındaki kelimelere belirli büyüklükler verdi.
1.5.8. METİN BİÇİMLENDİRME
Şimdi ise biraz daha amatörlük seviyesini geçip daha fazla kod kullanalım.
Belki gün gelir iyi webmasterlar gibi sayfalarca kod yazıp sizde web tasarım şirketleri kurabilirsiniz.
Kodlar şu şekilde olsun:
1.5.9. METİN BİÇİMLENDİRME
Sayfama Hoşgeldiniz
>
HTML etiketleri ile,
Yazıları koyu italik ve altı çizili olarak yazabiliyorum1.5.10. METİN BİÇİMLENDİRME
1.5.11. METİN BÇİMLENDİRME
Yeni öğrendiğimiz kodlara bir göz atalım:
1.6. FONTLAR
Font etiketinin kullanımı;
1.6.1. FONTLAR
Bunlara font etiketinin parametreleri deniyor.
1.6.2 FONTLAR
etiketinin yanı sıra öğreneceğimiz bir diğer etiket göreceğiz.
etiketi
etiketi. Önce bu etiketin kullanımını
etiketi bir bakıma 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
HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından fark etmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için kullanıyoruz. İstisnai etiketlerden birisi bu, sonlandırılmıyor.
sonlandırmaya gerek yok.
Yani
enter
tuşunun tuşunu kullanırız. Fakat etiketini
“” olarak
1.6.3. FONTLAR
Buna bir örnek verelim;
ocak
şubat
mart
nisan
1.6.4. FONTLAR
1.6.5. FONTLAR
Yukarıdaki örneğimizde "pazartesi, salı ve çarşamba"yı yazarken enter'la bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki
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ılmaması.
1.6.6. FONTLAR
Şimdi font etiketinin kullanımını bir örnekle inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz (Başlat/Ayarlar/Denetim metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin Masası/Yazıtipleri).
Buradan yazı tiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.
1.6.7. FONTLAR
Yaz
Sonbahar
Kış
1.7.
LİNKLER
... Geldik HTML'de en önemli unsurlardan birisi olan yere yolla bağlantılara.
götürecektir.
dosyaları, sıkıştırılmış Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz HTML'de metinlere dosyalar, ve resimlere bağlantı kazandırmak mümkündür. Bu başka neler yapılabilir? Ses, grafik internet adresleri,..
kazandırmak olabilir.
bunların mümkün.
hepsine Hatta bağlantı yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da
1 .7.1. LİNKLER
Ş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 bağlantıları oluşturmak mümkün.
ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz
1 .7.2. LİNKLER
Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim;
etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi gösterilir.
belirtilmemişse browser tarafından altı çizili ve mavi renkli
1 .7.3. LİNKLER
Ör:
buraya tıklandığında meyve resmi açılacak
Birinci örnekte "buraya tıklandığında meyve resmi şekline açılacak" yazısına dönüşecektir.
ile aynı dizinde bulunan bağlantı Kullanıcı kullanıcı hata mesajıyla karşılaşır.
bu
meyve.gif
ö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 linke tıkladığında browser o anda açık bulunan sayfa resmini açacaktır. Tabii ki dosya farklı bir dizinde ise
1 .7.4. LİNKLER
Ör:
sıkıştırılmış midi dosyalarını çekmek için tıklayın
İkinci örnekte aynı şekilde
meyve.gif
midi.zip
'e tıklandığında
"sıkıştırılmış midi dosyalarını çekmek için tıklayın"
browser gibi dosyaları görüntüleyememesidir.
yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte resmi açacaktır fakat bu örnekte browser kullanıcıya 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
1 .7.5. LİNKLER
Ör:
2.sayfaya gitmek için tıklayın
Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan
sayfa
isimli başka bir html dökümanı açılacaktır.
Ör:
Dördüncü örnekte bir internet adresi verdik.
Ör:
Bu ise bir ftp adresine verilen link örneği.
1 .7.6. LİNKLER
Ör:
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.