Html`e Giriş

Report
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.
Türkçe karakterleri tarayıcıda doğru göstermek için
<meta http-equiv="Content-Type" content="text/html" charset=utf-8" />
<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>

similar documents