sunu (Html-1)

20
HTML

Transcript of sunu (Html-1)

Page 1: sunu (Html-1)

HTML

Page 2: sunu (Html-1)

2

HTML ( Hyper Text Markup Language )

0Html web sayfalarının yapımında kullanılan bir dildir. Diğer programlama dillerinden farklı

yönü sadece görsel düzenleme için kullanılmasıdır.

Page 3: sunu (Html-1)

3

HTML

0Html herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine web sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir

Page 4: sunu (Html-1)

4

HTML

0Bir html dokümanı hazırlandıktan sonra kaydedilirken dosya_adi.htm veya dosya_adi.html olarak kaydedilmelidir.

0Dosya isminizde Türkçe karakter kullanmamaya özen gösterin, çünkü bazı web tarayıcıları Türkçe karakterleri algılayamadıkları için sayfalarınızı açamayacaklardır.

Page 5: sunu (Html-1)

5

HTML

0Web’ deki öncelikli amaç, herkesin yayıncılık yapmasını sağlayacak standart ve geliştirilmesi basit bir sistem kurmaktı.

0 HTML’in özellikleri ilk günlerinden bu yana oldukça uzun bir yol aldı. Bugün, HTML için üç ayrı standart tanımlanmıştır.

Bunlar:0HTML 1.00HTML 2.00HTML 3.0

Page 6: sunu (Html-1)

6

HTML

0 Bugün artık genel olarak HTML 2.0 ve HTML 3.0 kullanılmaktadır. HTML 3.0 da eklenen özellikler ise şunlardır:

0 Sayfa düzeni üzerinde ileri derecede kontrol0 Manşetler

0 Görüntülerdeki popüler noktaların istemci tarafından işlenmesi

0 Özelleştirilmiş listeler0 Matematik denklemler

0 Stil yaprakları0 Form içi tablolar

Page 7: sunu (Html-1)

7

HTML

0 HTML dokümanımızda hangi standartları kullanacağımızı dokümanımızın başında

belirtmemiz gerekir . Bu sayede, dokümanı görüntüleyen bilgisayar neye göre işlemler

yapacağını bilir.

Page 8: sunu (Html-1)

8

YAZIM KURALLARI

- Komutlar büyük yada küçük harfle yazılabilir.

- Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) karakterleri içermez.

- Komutlar < ve > işaretleri arasında yazılır ve tagadını alırlar.

Page 9: sunu (Html-1)

9

KULLANILIŞ BİÇİMİ

<tag_adi>

Örnek : <HTML>,<BODY>,<TITLE>

- Bir tag <tag_adi> şeklinde başlar ve bazı taglar dışında </tag_adi> şeklinde biter.

Page 10: sunu (Html-1)

10

KULLANILIŞ BİÇİMİ

- Taglar iç içe yer alırlar ve en içteki tag'dan başlatılarak kapatılırlar. Kodların okunabilirliğini artırmak için bir tag bitmeden tekrar tag açılırsa

içeride açılan tag biraz daha içeriden yazılmalıdır.

Kullanılış biçimi :<tag_1><tag_2>

......</tag_2></tag_1>

Page 11: sunu (Html-1)

11

ÖRNEK

<HTML><BODY>

......

......</BODY><FORM>

......

......</FORM></HTML>

Page 12: sunu (Html-1)

12

HTML KOMUT YAPISI

1. <HTML><html> etiketi, html kodlarının yazımına başladığımızı gösteren etikettir. Tüm html kodları <html>…</html> arasında yer alır. </html> ile html kodlarının yazımının bittiği anlaşılır. Bu etiketin hiçbir parametresi yoktur.

Page 13: sunu (Html-1)

13

HTML KOMUT YAPISI

2. <HEAD>Kodlardan da anlaşılabileceği gibi bu iki kod normal olarak sayfada görüntülenmez ancak bütün sayfayı etkileyen içeriği barındırır. Bir anlamda kod sayfanızın beynidir diyebiliriz. İçeriğinde stil sayfası bağlantısı, yazı karakteri, meta taglar ve title (başlık) öğeleri bulunur.

Page 14: sunu (Html-1)

14

HTML KOMUT YAPISI

3. <BODY>

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

Page 15: sunu (Html-1)

15

BODY ETİKETİ PARAMETRELERİ

0 Body etiketi ile birlikte kullanılabilecek parametreler ve görevleri aşağıda gösterilmiştir.

Bgcolor: Hazırlamış olduğunuz web sayfasının arka plân rengini belirlemek için kullanılır.

Kullanımı; <body

bgcolor=”blue”>…</body>

Page 16: sunu (Html-1)

16

BODY ETİKETİ PARAMETRELERİ

Background: Hazırlamış olduğunuz web sayfasının zemininin bir resimden oluşmasını isteyebilirsiniz. Bu parametre arka plânda kullanılmak istenilen resmi belirlemek için kullanılır.

Kullanımı; <body background=”resim.jpg”>….</body>

Page 17: sunu (Html-1)

17

BODY ETİKETİ PARAMETRELERİ

Link: Web sayfanızda kullanacağınız linklerin rengini belirlemek için kullanılır.

Alink: Web sayfanızdaki herhangi bir Linke tıklandığı zaman oluşacak rengin ne olacağını belirlemek için kullanılır.

Vlink: Web sayfanızdaki önceden ziyaret edilmiş linklerin renginin hangi renk olacağını belirlemek için kullanılır.

Page 18: sunu (Html-1)

Girilecek Kod Görevitext = “renk” Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.

link = “renk” Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.

vlink = “renk” Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir.

alink = “renk” Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir.

bgcolor = “renk” Sayfanızın arka plan rengine renk ile tanımlı değeri verir.

background = “resim_dosyası”

Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim_dosyası kullanacağınız resmin adını temsil eder.

topmargin = “değer”

Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.

leftmargin = “değer”

Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.

rightmargin = “değer”

Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.

onload = “betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.

onunload = “betik”

Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler. 18

Page 19: sunu (Html-1)

19

HTML KOMUT YAPISI

4. <TITLE>Sayfa başlığımızı (sayfamızın durum çubuğunda görünecek adını) atamamızı sağlayan koddur. Bu yazıyı değiştirmek için bu kodların arasına istediğiniz metni yazmanı yeterlidir.

Kullanımı; <title> görüntülenmesini istediğiniz başlık</title>

Page 20: sunu (Html-1)

20

ÖRNEK