HTML`e Giriş

Internet Nedir?
 Internet, birçok bilgisayar sisteminin birbirine bağlı olduğu,
dünya çapında yaygın olan ve sürekli büyüyen bir iletişim
ağıdır.
 Internet, insanların her geçen gün gittikçe artan "üretilen
bilgiyi saklama/paylaşma ve ona kolayca ulaşma" istekleri
sonrasında ortaya çıkmış bir teknolojidir.
Internet Nedir?
 İnsanların kendi arasında etkileştiği, bilgi değiş-tokuşu
yapabildiği ve kendi yazısız kuralları olan büyük bir
topluluktur.
 Pek çok yararlı bilginin bir tuşa basmak kadar yakın olduğu
dev bir kütüphanedir.
Internet Nedir?
 Kişilerin
değişik
konularda
fikirlerini
söyleyebilecekleri ortamlar barındıran bir
platformudur.
serbestçe
demokrasi
 Evden alış-veriş, bankacılık hizmetleri, radyo-televizyon
yayınları, günlük gazete servisleri vb gibi uygulamaları ile
aslında internet aynı zamanda bir hayat kolaylaştırıcıdır.
İnternet adreslerindeki uzantılar
















.com : ticari kurumlar
.gov : devlet kurumları
.net : internet servis sağlayıcıları
.org : kar amacı gütmeyen kuruluşlar, dernekler
.mil : askeri kurumlar
.edu : üniversiteler, eğitim kurumları
.k12 : ilkokul, lise vb eğitim kurumları
.ac : akademik kurumlar
.int : uluslararası kurumlar
.arts : sanat ve kültür kurumları
.firm : ticari firmalar
.info: bilgi servisi sunan siteler
.nom : kişisel
.name : kişisel
.rec : eğlence siteleri
.stor : alışveriş siteleri
İnternet adreslerindeki uzantılar
















Bazı ülke kısaltmaları:
tr:Türkiye,
jp:Japonya,
uk:Ingiltere,
it:İtalya,
ch:Isviçre,
ca:Kanada,
ru:Rusya,
id:Endonezya,
nl:Hollanda,
de:Almanya,
fr:Fransa,
il:İsrail,
no:Norveç,
se:İsveç,
br:Brezilya,
Bazı Internet Terimleri
 INTERNET
 TCP/IP tabanlı herkese açık ağdır. Özel bir ağ olmayıp, kimseye
ait değil ve kimse tarafından kontrol edilemez.
Bazı Internet Terimleri
 TCP/IP: (Transmission Control Protocol / Internet Protocol)
 Ağ ortamında bilgisayarların iletişimini sağlayan protokoldür.
 İlk olarak Amerikan Savunma Bakanlığı tarafından hazırlanmış ve 1970
in sonlarında genel kullanım için geliştirilmiştir.
Bazı Internet Terimleri
 Intranet
 Bir firmanın kendi iletişim alanı içerisindeki ağ ortamında
bilgisayarlar arası iletişime verilen addır. Internet’in özel bir
versiyonudur.
 World Wide Web
 Bir web browser kullanılarak görüntülenebilen Internet’in
grafiksel yüzüdür.
Bazı Internet Terimleri
 Web Page (Web Sayfası)
 Internet üzerinde görüntülenebilen her dosya web sayfasıdır.
Web sayfası ASCII karakterleri kullanılarak yazılan HTML denen
bir işaretleme dili ile yazılır.
 Web Browser (Web Tarayıcısı)
 World Wide Web üzerinde bulunan sayfaları yükleyip
görüntülemeyi sağlayan program.
Bazı Internet Terimleri
 Web Server
 HTML sayfalarını, Web Tarayıcınıza gönderen Internet üzerindeki
sunucu makinelerde çalışan programdır. Web Serverlar günümüzde
HTML nin daha gelişmişi olan CGI (Common Gateway Interface), ASP
(Active Server Page) vs gibi sayfaları da istemcilere
gönderebilmektedir.
 HTML (Hyper Text Markup Language)
 Web Sayfası hazırlama dilidir. Metinlerin görünümünü, konumunu vs.
şekillendirmek için metin ve etiketlerle kontrol edilen oldukça basit
bir işaretleme dilidir.
Bazı Internet Terimleri
 URL (Uniform Resource Locator)
 Internet üzerideki adreslerin genel adıdır. http://www.firat.edu.tr
üniversitemizin web sayfasının URL’sidir.
 Hyperlink
 Tıklandığında bağlı olduğu diğer bir sayfanın açılmasını sağlayan bir
bağlantıdır.
 HTTP (Hyper Text Transfer Protocol)
 HTML sayfalarının Web tarayıcınıza aktarılmasında kullanılan
protokoldür.
Bazı Internet Terimleri
 E-Posta
 Elektronik mektup (e-mail), kişilerin ve kuruluşların internet üzerinden
hızlı bir biçimde haberleşmesi için kullanılan bir sistemdir.
 E-posta almak için POP3 ya da IMAP protokolü kullanılır.
 POP3 (Post Office Protokol)
 Elektronik posta almakta kullanılan bir protokoldür.
 Oldukça geniş kullanımı olan POP tek bilgisayar kullanımında en iyisidir
çünkü offline mesaj erişimini desteklemektedir, mesajlar önce istemciye
çekilmekte sonra sunucudan silinmektedir.
Bazı Internet Terimleri
 IMAP(Internet Mail Access Protocol)
 e-posta sunucunuzdaki e-postalarınıza erişebilmeniz için
kullanılan bir metottur. Başka bir deyimle istemcide çalışan bir
e-posta programının uzaktaki e-postaları sanki istemcideymiş
gibi erişimine izin verir. Örneğin, IMAP sunucuda saklanan epostalarınıza evinizdeki kişisel bilgisayarınızdan, işyerinizdeki iş
istasyonundan ya da seyahatte diz üstü bilgisayarınızdan
mesajlarınızı bu bilgisayarlar arasında transfer etmeden
ulaşabilirsiniz.
Bazı Internet Terimleri
 SMTP( Server Mail Transfer Protocol)
 E-posta gönderme protokolü (SMTP), bir e-posta göndermek için
sunucu ile istemci arasındaki iletişim şeklini belirleyen protokoldür
 Outlook, Eudora, Kmail, Thunderbird, Evolution, Sylpheed gibi eposta istemcileri, e-postalarınızı gönderilmek üzere sunucunuza
iletirken SMTP servisinden faydalanırlar.
Bazı Internet Terimleri
 FTP (File Transfer Protocol)
 Internet üzerinden dosya aktarımını sağlayan protokoldür.
Örneğin ftp://arsiv.firat.edu.tr Üniversitemizin arşiv FTP sinin
URL sidir.
 Telnet
 Internet ağı üzerindeki çok kullanıcılı bir makineye uzaktaki başka bir
makineden bağlanmak için geliştirilen bir TCP/IP protokolü ve bu işi
yapan programlara verilen genel isimdir.
 Örnek olarak Telnet ile bir pop3 sunucuya bağlanıp mailleri
okuyabilir veya bir ftp sunucuya bağlanıp ftp klasörlerini
araştırabilirsiniz.
Bazı Internet Terimleri
 ISP (Internet Service Provider)
 Internet Servis Sağlayıcı
 Kişiler öncelikle bir ISP'den aldıkları kullanıcı adı ve şifresiyle
Internet'e bağlanırlar. Bu bağlantı ISP firmaları (Örneğin
Superonline,TTNET gibi) tarafından belli bir ücret karşılığında satılır.
 DNS (Domain Name Server=Alan Adı Sunucusu)
 Web sitelerinin alan adlarının hangi IP’ye yönlendirileceğinin
saklandığı sunucudur.
World Wide Web
 World Wide Web (ya da kısaca Web) birbirleri ile iletişim
kuran iki bileşenden meydana gelir. Bunlar;
Web Browser (Client: İstemci)
2. Web Server (Server: Sunucu)
1.
Web Nasıl Çalışır
1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink ’e
tıklar.
2. Browser DNS (Domain Name Server) a bağlanıp istemde
bulunduğu sayfanın server IP sini alır.
3. Ardından Aldığı IP ye bir çağrı gönderir ve sayfayı ister.
4. Web Server da bu isteğe cevap verir ve http üzerinden sayfayı
Web Browser a gönderir.
Web Nasıl Çalışır
HTTP ve HTML
 HTTP, Web Server ile Web Browser ’ın birbirleri ile haberleştiği bir




protokoldür.
HTML dokümanları metin ve etiketlerden meydana gelir. HTML etiketleri
açılı parantez içerisinde (< >) yazılır. HTML etiketlerinin çoğu slash(/)
karakteri ile biten etiket ile kapatılarak bloklar halinde kullanılır.
Örnek:
<B>HTML</B> bir metin işaretleme dilidir.
Yukarıdaki örnekte HTML koyu olarak yazılacaktır.
HTML Versiyonları
 HTML nin birkaç versiyonu vardır. Günümüzde çoğu Web Tarayıcısının
desteklediği 3.2 versiyonudur. HTML’nin standardı Word Wide Web
Consortium (W3C) tarafından kontrol edilmektedir. HTML nin 4.
versiyonunda iki yeni eklenti vardır.Bu eklentilerin en önemlileri;
 Cascading Style Sheets (CSS)
 Dynamic HTML (DHTML)
HTML Versiyonları
 Cascading Style Sheets (CSS)
 CSS nin her yerde kullanılması nedeni ile W3C, CSS nin Internet Explorer ve
Netscape Navigator tarafından desteklenen standardını belirledi.
 CSS Microsoft Word ün stili gibi çalışır. Stili önceden tanımlarız. Daha
sonrada sayfadaki elemanlarda stile başvuru yaparsınız. CSS ile madde
imlerini, metin fontlarını, kullanılan başlık fontunu vs. değiştirebiliriz.
 Dynamic HTML (DHTML)
 Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket
etmesini ya da görünümünün değişmesini sağlayabilen Web Sayfaları
yapabilme imkanı sağlayan dildir.
HTML Extensions (Uzantıları)
 Son birkaç yılda bazı satıcılar web modelini dinamik (mekanik) ve
interaktif (etkileşimli) içerikli olarak geliştirdiler.
 Bunlar;
 Client-Side Extensions (İstemci Tarafı)
 Server-Side Extensions (Server Tarafı)
 Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dynamic
HTML, Client-Side a birer örnektirler.
 CGI programları ve scriptler, Active Server Page ve FrontPage WebBots’
lar da birer Server-Side Extension a örnektirler.
XML: eXtensible Markup Language
Genişletilebilir İşaretleme Dili
 XML Internet’teki en yeni dillerdendir. XML “Verilerde yapı belirtmek
için ortak bir yazım şekli” olarak ifade edilebilir. Bu bağlamda XML pek
de dil sayılmaz.
 HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized
Markup Language (SGML) den türerler. XML in HTML’den farkı HTML
sabit etiketlere sahiptir fakat XML kendi etiketlerinizi tanımlamanıza izin
verir.
Web Hazırlama Yazılımları
 Web hazırlamak için birçok araca sahibiz. Bunları üç
sınıfta toplayabiliriz.
 HTML editörleri
 Web Sitesi geliştirme araçları
 Web Uygulaması geliştirme araçları
HTML Editörleri
 HTML yazmak için NotePad ‘i kullanabileceğimiz gibi yardımcı
programlar da vardır. Metin tabanlı, kod yazmayı gerektiren fakat bunun
yanısıra rutin bazı işlemleri kolaylaştıran editörlerdir. Bunlardan bir
kısmı;
 Hot Dog
 HotMetal Pro
 HomeSite
 1st Page 2000
 Basit bir metin editörü.
Web Sitesi Geliştirme Araçları
 Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi
hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte
linkler kontrol edebilen araçlar ve Web Sitesini Web Server a
yayınlayabilecek araçlar içerir. Bu kategorideki programlar görsel,
kodlamayla uğraştırmayı gerektirmeyen editörler dir. Bunlar;
 Fusion
 Visual Page
 Dreamweaver, Flash
 FrontPage
Web Uygulamaları Geliştirme
Araçları
 Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada





kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile
bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır.
Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web
Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları;
ColdFusion
NetDynamics
Dreamweaver UtraDev
Visual InterDev
HTML (HyperText Markup Language) Nedir?
 HTML(Hareketli-Metin İşaretleme Dili) basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayan bir
çeşit dildir.
 HTML, programlama dilleri (pascal, basic,..) gibi bir programlama
mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.
 Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek,
düzenlemek için kullandığımız komutlar dizisi diyebiliriz.
Bir Web Sayfasının Genel Yapısı
<HTML>
<HEAD>
Başlık Metni
</HEAD>
<BODY>
Body Metni
</BODY>
</HTML>

Not: Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu da içerebilir. Bu
başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani
yazmasak ta olur.
 Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy> etiketleri
arasında bir fark yoktur.
Yapısal Etiketler (Structural Tags)
 Yapısal etiketler (< >) web sayfasında farklı bölümler tanımlamak için
kullanılır. Bunlar;
İLK ETİKET
SON ETİKET
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE>
</TITLE>
<BODY>
</BODY>
<!--
-->
AÇIKLAMA
HTML dokümanının başlangıç ve bitini tanımlar.
Başlık bölümünün başlangıç ve bitimini tanımlar.
Web Sayfasının başlığını tanımlar. Browser’ın
isim çubuğunda görünecek olan metindir.
Web Sayfasında gösterilecek olan içeriğin
yazıldığı bölümü tanımlamada kullanılır.
Bu etiketler Web Sayfamıza açıklamalar
eklemede kullanılır.
İlk sayfam
 Notepad'i açın ve şunları yazın:

Dosyayı “sayfa1.htm” olarak kaydedin.
İlk sayfam
 Sayfa1.htm dosyasını açtığınızda varsayılan browserınız
(Internet Explorer, Netscape Navigator gibi) tarafından
görüntülenecektir.
Etiket Özellikleri (Tag Attributes)
 Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin
davranışını düzenlemek için değerler atarız. Kullanımı;
 <ETİKET özellik1=”value” özellik2=”value”>
 Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P>
etiketi yeni bir paragraf başlatır ve varsayılan olarak metni
sola yazlar.
 <P>Bu Metin Sola Yaslıdır.</P>
 <P align=”left”>Bu Metin Sola Yaslıdır.</P>
 <P align=”right”>Bu Metin Sağa Yaslıdır.</P>
 <P align=”center”>Bu Metin Ortalanmıştır.</P>
İlk sayfam
 Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim:
 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. 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.
İlk sayfam
 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 <body>....</body> arasına yazdığımız
Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin
ayarlarıyla gösteriliyor.
 İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama
Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek
de aynı neticeyi elde edecektik.
Etiket Özellikleri (Tag Attributes)
 <HTML> Etiketi
 Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu
ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun
arasında kalmalıdır.
 <HEAD> Etiketi
 Bu etiket içerisinde yazılan sayfada gözükmezler. Web sayfası
ile ilgili temel özellikler, Sayfa Başlığı, Yazı karakterler kümesi,
link özellikleri gibi, burada tanımlanır. Kısaca head kısmında
sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu etiket
genellikle sadece <TITLE> ve </TITLE> etiketlerini <META>
etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini içerir.
Etiket Özellikleri (Tag Attributes)
 <TITLE></TITLE>
 <TITLE> satırında Internet Explorer (=IE) programına
sayfaya başlık verilmek istendiği işaret edilmektedir. IE
<TITLE> ve </TITLE> arasında yazılan metni pencere
başlığı olarak kabul eder. Bu deyimler
<HEAD></HEAD> deyimleri arasına yeralır.
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 <BODY> etiketleri ile tanımlanan <BODY> bölümüne
sayfamızda görünmesini istediğimiz bilgileri yazarız.
<BODY> etiketi birçok özelliğe sahiptir. Bunların çok
sık kullanılanları;






BACKGROUND
BGCOLOR
TEXT
LINK
VLINK
ALINK
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 BACKGROUND
 Sayfamızın arka planında gözükmesini istediğimiz resmi
belirtmede kullanırız. Arka plan resmi kaynak dosyası
olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan
resmi web sayfasını doldurmaz, döşenir.
Etiket Özellikleri (Tag Attributes)
 <BODY BACKGROUND= “resim.gif” ></BODY>
 Örnek:

<HTML>
 <HEAD> <TITLE> Ornek08.html</TITLE></HEAD>
 <BODY BACKGROUND=”File:///a:/resimler/artalan.gif”>
 <!--Diskette bulunan bir resim artalan olarak görüntüleniyor... -->
 <B> Erkan TANYILDIZI</B>
 </BODY> </HTML>
Etiket Özellikleri (Tag Attributes)
 <BODY> Etiketi
 BGCOLOR
 Sayfamızın arka plan rengini belirtmede kullanırız. Bu
özelliğe vereceğimiz değerler renk adı olabileceği gibi
rengin hexadecimal RGB renk kodu da olabilir.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Not: Bazı Web Browser lar yukarıdakilerin haricinde renk
adlarını da destekler. Mesela Internet Explorer lightgreen,
darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı
Browser dan sayfa isteminde bulunmayacağını göz önüne
alarak yukarıdaki renk isimlerini ya da hexadecimal renk
kodunu kullanmak daha sorunsuz olacaktır.
Etiket Özellikleri (Tag Attributes)
 <BODY BGCOLOR =”renk”>…..</BODY>
 Örnek: Daha önce hazırladığımız bir html sayfasının <BODY>
etiketini
<BODY bgcolor=”yellow”>
ya da
<BODY bgcolor=”#FFFF00”>
olarak değiştirelim. Arka plan renginin sarı olduğunu
görürüz.
 Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR
özelliklerinin her ikisine de değer atandığında
BACKGROUND resmi gösterilecektir.
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 TEXT:Metin rengi
 LINK: Ziyaret edilmemiş link rengi
 VLINK: Ziyaret edilen link rengi (vizited link)
 ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse
basılı iken gözükecek olan renktir.
 BGPROPERTIES: Bu özelliğe fixed değeri atandığında
arka plan resmi sabit olup kaydırma çubuğu ile arka
plan resmi hareket etmeyecektir.
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 Örnek:
 <HTML>
 <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE></HEAD>
 <BODY background="bg.jpg" bgcolor="gray" text="white"
 link="yellow" vlink="aqua" alink="red" bgproperties="fixed">
 <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1>
 <HR> <H2>Web Sayfası</H2> <HR>
 Fırat Üniversitesinin Sayfasına Gitmek İçin
 <A href="http://www.firat.edu.tr">Tıklayınız</A> <BR>
 Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin
 <A href="www.ktu.edu.tr">Tıklayınız</A> <BR>
 Arama motoru <A href="http://www.google.com.tr">Google</A> <BR>
 </BODY>
 </HTML>
Etiket Özellikleri (Tag Attributes)
 Diğer <BODY> Özelikleri
 Örnek:
Etiket Özellikleri (Tag Attributes)
 <HR> Etiketi
 <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE>
 Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek
için kullanılır.
 WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak
burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir
satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir
yatay çizgiyi işaret eder.
 SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır.
 COLOR : Çizginin rengi.
 NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre
kullanılırsa yatay çizginin gölgesi ortadan kalkar.
Etiket Özellikleri (Tag Attributes)
 <HR> Etiketi
 Örnek
 <HTML> <HEAD><TITLE>Ornek09.html</TITLE></HEAD>
 <BODY BGCOLOR=#66CCFF>
 <HR>
 <HR WIDTH=75% NOSHADE>
 <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE>
 <HR COLOR=Red WIDTH=100 SIZE=3>
 <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE>
 </CENTER> </BODY> </HTML>
Belge Biçim Etiketleri
 HTML çok sayıda biçimlendirme etiketi sunar.
 Bu etiketlerle belgede;
 başlık oluşturur,
 metni kalın, italik, altçizgili yapar,
 madde imlerini oluşturur
 ve yatay çizgiler oluşturabilirsiniz.
 Bunlardan bazıları aşağıdaki tablodadır.
Belge Biçim Etiketleri
İLK ETİKET
<H1>...<H2>
<STRONG>
<EM>
<B>
<I>
SON ETİKET
AÇIKLAMA
Header Tags: Başlık etiketleridir. 1 numaralısı
</H1>...</H2> en geniş olanıdır. Varsayılan hizalama (align)
sol (left) olup istersek değiştirebiliriz.
Strong Emphasis: Güçlü Vurgu Ediketidir.
</STRONG>
Genellikle Bold kalın metin olarak gözükür.
Emphasis: Vurgu Etiketi. Genellikle italik
</EM>
gözükür.
</B>
Bold: Kalın yazı
</I>
Italic: İtalik yazı
<U>
</U>
<SUP>
</SUP>
<SUB>
</SUB>
Underline: Altçizgili yazı
Bu iki deyim arasına yazılan metin üst indis
olarak işlem görür.
Bu iki deyim arasına yazılan metin alt indis
olarak işlem görür.
Belge Biçim Etiketleri
İLK ETİKET
SON ETİKET
<PRE>
</PRE>
<P>
</P>
<DIV>
</DIV>
AÇIKLAMA
Preformatted: Metni Courier fontu gibi her bir
karakteri aynı genişlikte gösterir. Bu tip fontlara
font-pitch denir. Web sayfasında yazılan
kelimelerin arasında yalnız bir boşluk vardır. Ayrıca
bir alt satıra geçerken <BR> deyiminin kullanılması
gerektiği daha önce bahsedilmişti. Web sayfasında
yazdığınız metnin NodPad e yazdığınız formatta
görünmesi için bu deyim kullanılır.
Paragraph: Paragraf etiketi. Kapatma etiketi
kullanılmaya bilir. Align değeri varsayılan olarak
left olup bu etiket bloğundan önce ve sonra bir
satır boş bırakılır.
Division: Bölüm Etiketi. Sayfada yeni bir bölüm
açmada kullanılır. Align özelliğinin varsayılan
değeri left olup P etiketinde olduğu gibi bloktan
önce ve sonra boş satır yoktur.
Belge Biçim Etiketleri
İLK ETİKET
SON ETİKET
AÇIKLAMA
Arada yazılan metni ortalamada kullanılır.
<CENTER>
</CENTER>
<BR>
yok
Line Break: Satır kırma etiketi.
<HR>
yok
<BASEFONT>
yok
<FONT>
</FONT>
<BIG>
</BIG>
<SMALL>
</SMALL>
Horizontal Rule: Yatay çizgi etiketi
Sayfanın genel metin büyüklüğünü ve rengini
değiştirmede kullanılır. size, color özellikleri
vardır.
Bir metin bloğunun büyüklüğünü, rengini ve
biçimini ayarlamada kullanılır.
Kullanıldığı alanda geçerli olan fontun
büyüklüğünün 1 derece büyüğünü yazmada
kullanılır
Kullanıldığı alanda geçerli olan fontun
büyüklüğünün 1 derece büyüğünü yazmada
kullanılır
Bunun yerine <DIV align=”center”> </DIV> de
kullanılabilir.
Metin Biçimleme
 Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları
yazıyoruz :
Metin Biçimleme
 Dosyayı “sayfa2.htm” olarak
kaydedin.
 Kaydettiğimiz dosyayı açtığımızda
:
Metin Biçimleme
 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ığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın
gövde <body> 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 <h1>...<h6> etiketleri
arasındaki kelimelere belirli büyüklükler verdi.
Metin Biçimleme
 Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası
oluşturalım. Kodlar şu şekilde olsun:
Metin Biçimleme
 Dosyayı “sayfa3.htm” olarak kaydedin.
 Kaydettiğimiz dosyayı açtığımızda :
Metin Biçimleme
Başladığınız etiketi sonlandırmayı sakın unutmayın !

Bir html dökümanını açtığımızda ve
ekran üzerinde farenin sağ tuşuna
tıklayıp ,
kaynağı görüntüle / view source 'u
seçtiğimizde Internet Explorer için
Notepad, Netscape için kendi Source
Viewer'ı açılacak ve bize o sayfanın
kodunu gösterecektir.
Metin Biçimleme
Metin Biçimlendirme Etiketlerinin Kullanımı
 Örnek:
 <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> </HEAD>
 <BODY>
 <H1>Metin Biçimleri (005_text.htm)</H1>
 <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG>
 <BR>
 <B>Kalın B (Bolt) Gibi Gözüküyor.</B>
 <!--Bir sonraki etiket yatay çizgi oluşturur.-->
 <HR>
 <EM>Vurgu EM (Emphasis) Metni</EM>
 <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>
 <HR>
Metin Biçimlendirme Etiketlerinin Kullanımı
 <PRE>
 Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan
 Metindir.
 Başka Bir Satır ve biraz boşluk<BR> </PRE>
 <HR>
 Birkaç Metin Yazalım.
 <BR>Bu Satırdan Önce Bir BR etiketi Var.
 <P>Bu Satırdan Önce P Etiketi Var.</P>
 Birkaç Metin Daha
 <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV>
 Bu Kadar Metin Yeter.
 <HR>
 </BODY>
 </HTML>
Metin Biçimlendirme Etiketlerinin Kullanımı
Fontlar
 <BASEFONT> Etiketi
 Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT>
 un varsayılan font büyüklüğü 3 tür.
 Örnek:
 <BASEFONT size=”5” color=”red”>
 yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı
 olacaktır. (Aksi belirtilmedikçe)
Fontlar
 <FONT> Etiketi
 Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı
etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı :
 <font face="..." size="..." color="...">...</font>
 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 diyoruz.
Fontlar
 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 sisteminizde yüklü olan fontları inceleyin
(Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan
yazıtiplerini açarak inceleyebilir ve beğendiklerinizi
kullanabilirsiniz.
Fontlar
 Şimdi font etiketinin kullanımını bir örnekle inceleyelim :
Fontlar
 Her zamankinden farklı
olarak ve ilk defa sayfamızda
renk kullandık.
 Örnekte de gördüğünüz gibi
bu işi renk kodlarıyla yaptık.
Fontlar
 Aslında renkli yazmanın bir yolu daha var o da renk kodu
yerine rengin ingilizce adını yazmak (color="red" gibi).
Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green
Fontlar
 <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar
 Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü
ayarlamıştık font un size özelliğine +n veya –n değerlerini
atayarak mevcut fontun n fazlası veya n eksiği olarak
ayarlayabiliriz.
 <BIG> ve <SMALL> etiketleri de bağlı etiketlerdir. Bu etiketlerle
da sırası ile mevcut fontun bir derece büyüğünü ve bir derece
küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT
size=”+1”> ve <SMALL> ile <FONT size=”-1”> aynı kullanıma
sahiptir.
Fontlar
 <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar
 Örnek:
 <HTML> <HEAD><TITLE>Bağlı Fontlar (Relative Fonts)</TITLE></HEAD>
 <BODY> <P>Bu normal BODY metnidir.</P>
 <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P>
 <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P>
 <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p>
 <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P>
 <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P>
 <P><SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL></P>
 <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p>
 <P><SMALL><SMALL>Bu metin iki tane SMALL etiketi ile
yazılmıştır.</SMALL></SMALL></P>
 </BODY> </HTML>
Fontlar
 Örnek:
Listeler
 HTML bize üç tip liste hazırlama imkanı veriyor.
 Bunlar :
 Sıralı listeler (ordered list)-Otomatik Numaralı (<OL>
 Sırasız listeler (unordered list)-Madde imli (<UL>)
 Tanımlama listeleri (definition list)
 Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret
ederiz.
 Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak
liste oluşturmamızı sağlar.
 Sırasız listeler rakam/harf yerine madde imleri koyarak liste
oluşturmamızı sağlar.
 Tanımlama listeleri ise bir listeden çok kalabalık metinlerde
okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.
Sıralı Listeler
 Liste içine alınacak metinler <ol>...</ol> etiketleri arasına
alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini
belirtir.
 Listenin maddelerinin başına ise <li> (list item) etiketini
getiriyoruz.
 <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin
rakamla mı harfle mi başlayacağını (type) yada hangi
rakam/harfle başlayacağını (start) belirtebiliyoruz.
Sıralı Listeler
 <OL TYPE=” A|a|I|i|1” START=”sayı”></OL>
 Type parametresinde kullanabileceğimiz değerler şunlar
olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii
gibi)
 <OL> etiketinin TYPE özelliğine 1, a, A, I ya da i değerlerini
atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri
“1” dir.
 Numaralı listenin başlangıç değerini <OL> nin START
etiketinden ayarlayabileceğimiz gibi <LI> etiketinin VALUE
özelliğinden de ayarlayabiliriz.
Sıralı Listeler
Sıralı Listeler
 Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta
mümkün.
 Dikkat edeceğimiz nokta, işe <ol> etiketi ile başlayıp liste
maddelerinin her birisinin başına <li> etiketini getirmek ve
listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak.
 Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek
maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen
kuralları aynen uyguluyoruz.

Sırasız Listeler
 <UL TYPE=”DISC|CIRCLE|SQUARE”></UL>
 Bu tip listede de mantık aynı.
 Fark, listeleme yaparken maddelerin başına harf, rakam gibi
unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz.
 <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri
için kullandığımız <li> etiketi burada da geçerli.
 <ol> için kullanılabilecek parametreler ise şöyle; type için disc
(içi dolu daire), circle (içi boş daire), square (içi dolu kare).
Sırasız Listeler
Tanımlama Listeler
 Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd> ,
<dt>
 Listenin maddelerini belirtmek için kullandığımız <li> etiketinin
yerini burada <dt> ve <dd> etiketleri alıyor.
 Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz.
Tanımlama Listeler
Tanımlama Listeler
 Yazdığımız kodu browser’dan açtığımızda :