HTML e GİRİŞ Temel HTML etiketleri
HTML Nedir? HTML Hyper Text Markup Language : 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 editörleri HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir. 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. Biz NOTEPAD++ kullanacağız.!
Notepad ++ http://notepad-plus-plus.org/
Etiketler 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( <body>…</body> ) 2) Tek başına bulunan tag’lar ( <img /> )
HTML Sayfalarının Yapısı Uygulama: 10dk.
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.
<HEAD> Etiketinin Alt Etiketleri > META 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://google.com "> Yukarıdaki etiket HTML sayfasının 5 saniye sonra google.com sayfasına yönlenmesini sağlar.
<HEAD> Etiketinin Alt Etiketleri > META <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 <META NAME= “author“ CONTENT= “Aslı YAZAGAN“> Sayfayı hazırlayan kişiyi belirtmek için Author değişkeni kullanılır. http://www.w3schools.com/tags/tag_meta.asp
<<HEAD> Etiketinin Alt Etiketleri > TITLE 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=“Eğitim, Okul, Programlama”> <title>RizeMYO</title> </head> <body> Sayfanın başlığına bakınız.</body> </html>
<HEAD> Etiketinin Alt Etiketleri > STYLE <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 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 <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>
<HEAD> Etiketinin Alt Etiketleri > META HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5: <meta charset="UTF-8"> Kısaca her sayfanızda bulunması gereken META kodu: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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>
<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. http://www.w3schools.com/tags/tag_body.asp 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)
Paragraf Etiketleri <p> Metin içerisinde paragraf oluşturmak için kullanılır. http://www.w3schools.com/tags/tag_p.asp 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ı
Paragraf Etiketleri <p>: 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>
Başlık Etiketleri <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. http://www.w3schools.com/tags/tag_hn.asp
UyBaşlık Etiketleri: Uygulamagulama <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>