Transcript html
HTML’ ye Giriş
Uzm. Murat YAZICI
HTML Nedir?
• Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper
metin işaretleme dilidir, bir programlama dili değildir. Metin, resim
ve diğer nesnelerin bir web sayfası üzerinde nasıl görüntülendiğini
ve web sayfasının, bağlantıların birleşimiyle nasıl oluştuğunu
belirten dili ifade eder.
• HTML ziyaretçileriyle web sayfaları arasında etkileşimi mümkün
kılacak komutlar içermez. Fakat, PHP, ASP, Javascript, Flash veya CSS
gibi farklı eklentiler sayesinde dinamik web sayfaları
biçimlendirilebilir.
HTML Kodları
• HTML kodları ile sayfa oluşturmak için herhangi bir editör programı
kullanılabilir. Bu bölümdeki uygulamalar Not Defterinde
yapılacaktır.
HTML kodlarından oluşan dosyanın uzantısı .htm veya .html olabilir.
Günümüzde HTML kodlarını otomatik oluşturan bir çok program
mevcuttur.
HTML Etiketleri
• HTML komutlarının her biri Tag (Etiket) olarak adlandırılır. Tag,
daima sivri parantezler içinde yazılır. Harflerin küçük veya büyük
yazılması HTML'de hiçbir önem taşımaz.
<html>......</html>
<HTML>......</HTML>
<Html>......</HTML>
• HTML tagları iki şekilde sınıflandırılabilir.
1) Bir açma bir de kapama tag’ından oluşanlar( <b> kalın yazı </b> )
2) Tek başına bulunan tag’lar ( <hr> , <br> )
HTML Sayfalarının Yapısı
HTML Etiketleri
<html>...</html> 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ır: head(baş) ve body(gövde).
<head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır.
<meta> ve <title> gibi etiketler burada yer almaktadır.
<body>...</body> arası ise sayfamızın gövde bölümü. Ekranda
gösterilecek kısımlar bu etiketler arasında yer almaktadır.
<title>...</title>Title sayfanın başlığını belirtir.
İlk sayfamız (HTML Kodu)
İlk sayfamız (Ekran Görüntüsü)
Özel Karakterler
• HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için
aşağıdaki kodlar kullanılır.
©
<
>
&
"
Boşluk
©
<
>
&
"
karakteri
karakteri
karakteri
karakteri
karakteri
karakteri
Özel Karakterler
NOT : HTML etiketleri arasına yazılan metin içerisindeki boşluklardan
birden fazlası tarayıcılar tarafından yorumlanmaz. İki kelime arasına
konulan birden fazla boşluklar tek boşluk olarak yorumlanır. İki
kelime arasına veya iki nesne arasına birden fazla boşluk karakteri
koymak için kodu kullanılmalıdır.
Ayrıca Enter tuşu ile kodları ve içeriği alt satıra indirmekte HTML
açısından bir etkisi olmaz. Alt satıra geçmek için <BR> etiketini
kullanmadıkça alt satıra geçilmez.
<HEAD> Etiketinin Alt Etiketleri
<META> Etiketi :
Web sayfalarına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı
etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri, tazeleme
süresi… gibi bilgiler yer alır.
<META HTTP-EQUIV= "refresh" CONTENT= "5;
URL=http://muratyazici.com ">
Yukarıdaki etiket HTML sayfasının 5 saniye sonra muratyazici.com
sayfasına yönlenmesini sağlar.
<HEAD> Etiketinin Alt Etiketleri
<META HTTP-EQUIV= “content-language“ CONTENT= “TR “>
Sayfanın içeriğinin Türkçe olduğunu göstermektedir.
<META NAME= “keywords“ CONTENT= “ASP, PHP, Programlama“>
Arama motorları tüm webde sayfaları tararken sayfaları kolay ve
istenilen biçimde indekslemek için yardımcı olmak amacıyla
yukarıdaki gibi keywords değişkeni kullanır.
<META CONTENT= “Web tasarımı ile ilgili her şey“ NAME=“description”>
Sayfa hakkında açıklama cümlesi yazmak için description değişkeni kullanır.
<HEAD> Etiketinin Alt Etiketleri
<META NAME= “author“ CONTENT= “Murat YAZICI“>
Sayfayı hazırlayan kişiyi belirtmek için Author değişkeni kullanılır.
<html>
<head>
<meta http-equiv=“refresh” content=“3; URL=http://rize.edu.tr/”>
<meta http-equiv=“content-language” content=“TR”>
<meta name=“keywords” content=“Asp, Php, Programlama”>
</head>
<body>
3 sn. sonra ayrılıyoruz.
</body>
</html>
<HEAD> Etiketinin Alt Etiketleri
<TITLE> Etiketi :
Sayfaların başlığını belirler Tarayıcı penceresinde başlık çubuğunda
yazılan başlık görüntülenir.
<html>
<head>
<meta name=“keywords” content=“Asp, Php, Programlama”>
<title>Uzm. Murat YAZICI</title>
</head>
<body> Sayfanın başlığına bakınız.</body>
</html>
<HEAD> Etiketinin Alt Etiketleri
<STYLE> Etiketi :
Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır. Bu
etiket sayfa içi stil belirlemede kullanılır.
<html> <head>
<style>
p { color: red; }
h1 { color: blue; text-align: center; }
</style>
</head>
<body> <h1> Merhaba </h1>
<p> Web Tasarımı Dersine hoşgeldiniz. </p>
</body></html>
<HEAD> Etiketinin Alt Etiketleri
<LINK> Etiketi :
Sayfaya ait stil sayfalarını bağlamak için kullanılır. Bu stil sayfaları
harici sayfalardır. Bu sayfaların yapısı CSS bölümünde ayrıntılı olarak
incelenecektir.
Aşağıda link etiketinin kullanımı gösterilmiştir.
<head>
<LINK REL= stylesheet TYPE=“text/css” REF=“stil.css”>
</head>
<HEAD> Etiketinin Alt Etiketleri
<SCRIPT> Etiketi :
VBScript, Javascript kodlarının yazılacağı bir alandır. Gerektiğinde
<BODY> etiketi sınırları içerisinde de kullanılabilir.
Aşağıda <script> etiketinin kullanımı gösterilmiştir.
<html><head>
<script language="Javascript">
alert("Siteme hoşgeldiniz.");
</script>
</head>
<body> Javascript etiketi çalıştı. </body></html>
<BODY> Etiketi ve Alt Etiketleri
HTML belgesinin bütün içeriği burada yer alır. Buraya metinler,
resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. BODY
etiketinin alacağı parametreler :
Bgcolor
: Sayfanın arka plan rengini belirler (renk)
Background
: Sayfanın arka plan resmini belirler (URL)
Topmargin
: Üst kenar boşluğu (sayı)
Leftmargin
: Sol kenar boşluğu (sayı)
Link
: Sayfadaki linklerin rengini belirler (renk)
Vlink
: Ziyaret edilen bağlantıların rengini belirler (renk)
Text
: Sayfadaki metnin rengini belirler (renk)
<BODY> Etiketine Bir Örnek…
<html>
<head>
<title>Body etiketine bir örnek</title>
</head>
<body bgcolor=#FFFF99 topmargin=100 leftmargin=50 text=grey>
Bayrakları bayrak yapan üzerindeki kandır ; <br>
Toprak eğer uğruna ölen varsa vatandır.
</body>
</html>
Metin Biçimlendirme Etiketleri
<FONT> Etiketi :
Yazıda etkin olacak fontla ilgili çeşitli biçimlendirmeleri yapmak
için kullanılır. Fontun tipi, rengi ve büyüklüğü ayarlanabilir.
FONT Etiketi Parametreleri
Color
: Yazının rengini belirler (Renk)
Face
: Metnin yazı tipini belirler (Arial, Verdana, …)
Size
: Yazının büyüklüğünü belirler (Sayı) [ 1 – 7 ]
Örnek…
<html>
<head>
<title>Font etiketine bir örnek</title>
</head>
<body>
<font color=“#0000FF” size=“3” face=“Courier New”>Merhaba</font><br>
<font size=“5”>Uzm. Murat YAZICI</font><br>
<font color=“#008000” size=“4”>www.muratyazici.com</font><br>
</body>
</html>
Metin Biçimlendirme Etiketleri
<B> (Bold) Etiketi : Metni kalın ve koyu yapar.
<I> (Italic) Etiketi : Metni italik biçimde yazar.
<U> (Underline) Etiketi : Metni altı çizili olarak biçimlendirir.
<SUB> Etiketi : Metni alt simge olarak gösterir.
<SUP> Etiketi : Metni üst simge olarak gösterir.
Uygulama 1
<html>
<head> <title>Metin biçimlendirme etiketleri</title>
</head>
<body>
<b>Korkma, sönmez bu şafaklarda yüzen al sancak;</b><br>
<i>Sönmeden yurdumun üstünde tüten en son ocak.</i><br>
<u>O benim milletimin yıldızıdır, parlayacak;</u><br>
<b><u>O benimdir, o benim milletimindir ancak.</u></b>
</body>
</html>
Uygulama 2
<html>
<head> <title>Örnek</title>
</head>
<body>
2<sup>2</sup> * 3<sup>2</sup> = (2*3) <sup>2</sup>
</body>
</html>
Metin Blokları Etiketleri
<P> (Paragraf) Etiketi :
Metin içerisinde paragraf oluşturmak için kullanılır.
align : Paragrafı hizalamak için kullanılır. Aşağıdaki değerleri alır.
left
: Sola yaslı
right
: Sağa hizalı
center
: Ortalı
justify
: Her iki yana yaslı
Uygulama
<html>
<head> <title>P etiketine örnek</title> </head>
<body>
<p align= "center">RİZE ÜNİVERSİTESİ</p>
<p align= "justify"> Rize Üniversitesi, Türkiye Cumhuriyeti Bakanlar
Kurulu'nun 2006 yılı içerisinde aldığı bir kararla bağlı olduğu Karadeniz Teknik
Üniversitesi'nden ayrılarak Rize ilinde açılan üniversitedir. </p>
<p align= "right">www.rize.edu.tr</p>
</body>
</html>
Metin Blokları Etiketleri
<BR> Etiketi :
Satır başı için kullanılır.
Sonlandırması yoktur.
Satırbaşı ile paragraf arasında görüntü olarak iki satır arası
yükseklik ve yerleşim farkı vardır.
<H1>…<H6> Etiketleri:
Başlık etiketleridir. H harfinin yanındaki rakamsal değer başlığın
büyüklüğünü belirler. Bu değer 1 için en büyük, 6 için en küçüktür.
align (left, right, center) parametresiyle de kullanılabilir.
Uygulama
<html>
<head> <title>Örnek</title> </head>
<body>
<H1 align= "center">RİZE ÜNİVERSİTESİ</H1>
<H2 align= "center">Meslek Yüksekokulu</H2>
<h3 align= "center">Elektronik Teknolojisi Bölümü</h3>
<h6 align= "center">Web Tasarımı Dersi</h6>
</body>
</html>
Metin Blokları Etiketleri
<PRE> Etiketi :
HTML kod sayfasındaki biçimin (boşluk, satır,paragraf…) aynen
kullanılmasını sağlar.
Bu etiket birçok etiketi ve özel karakter kodlarını kullanmadan
metin biçimlendirmede çok büyük kolaylıklar sağlar.
Sonlandırması vardır. ( <pre> …….. </pre> )
Uygulama
<html>
<head> <title>Örnek</title> </head>
<body>
<pre>
int a = 10;
if (a%2 == 0)
Console.WriteLine(“Çift”);
else
Console.WriteLine(“Tek”);
</pre>
</body>
</html>
Metin Blokları Etiketleri
<HR> (Horizontal Ruler) Etiketi :
Sayfaya yatay bar şeklinde çizgi eklemek için kullanılır.
Sonlandırması olmayan bir etikettir.
Aşağıda etiketin özellikleri ve aldıkları değerler verilmiştir :
align
: Yataydaki konumunu verir. (Varsayılan : center) (left, right, center)
size
: Piksel cinsinden kalınlığını belirler.
width
: Genişliğini belirler. (Varsayılan : %100)
color
: Çizginin rengini belirler. (Varsayılan : Siyah)
Sayfalara Resim Eklemek
<img> Etiketi :
Sayfaya resim eklemek için kullanılır. jpg, bmp, gif, png… gibi
resim formatlarını belirler.
Sonlandırması olmayan bir etikettir.
src
: Resmin konumunu belirler.
alt
: Resme ait açıklama metni (fare resmin üzerine geldiğinde ortaya çıkar)
height
: Resmin yüksekliği
width
: Resmin genişliği
align
: Yataydaki konumu (left, right)
border
: Resmin kalınlığı
Uygulama
<html>
<head> <title>Örnek</title> </head>
<body>
<img src="resim/ru.jpg" alt="Rize Üniversitesi logo"
width="150" height="200" >
</body>
</html>
Bağlantı Eklemek (Link Vermek)
<A> Etiketi :
Bağlantı eklemek için kullanılır. <a>…</a> etiketleri arasına
yazılan metinlerin veya resim gibi nesnelerin üzerlerine fare ile
tıklandığında tarayıcı belirtilen adrese ziyaretçiyi yönlendirir.
<A> etiketinin özellikleri :
href
: Bağlantı adresini belirlemek için kullanılır.
href="index.htm" , href="dosyalar/cv.doc" , href="http://rize.edu.tr"
target
: Bağlantı ile gidilecek sayfanın hangi pencerede açılacağını belirler.
target="_blank" (Yeni sayfada açmak için)
Uygulama
<html>
<head> <title>Örnek</title> </head>
<body>
<a href="http://rize.edu.tr" target="_blank">
Rize Üniversitesi </a> web sayfası
</body>
</html>