Başarılar.
HTML Komut Yapısı
Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir. Html komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi, çeşitli web tasarımı editörlerini kullanarak da oluşturulabilir.
Html komutları etiketlerden (tag) oluşur.
Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;
1-) Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>, <tag>…..</tag>
2-) Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)
3-) Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.<body>….</BODY> veya <Html>….</html>
4-) Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.
Metin belgesini açıyoruz.(Not Defteri,Notepad++ vb.) Notepad++ 7.8.1 İndir
Örnek olarak gösterecek olursam;
HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.
Kaydetme işlemi sırasında Dosya -> Kaydet seçeneğine tıklanır.
Dosya-Kaydet komutuna tıklandıktan sonra karşınıza gelen Farklı Kaydet penceresinden sırasıyla Dosya Adı ve Dosya türü belirlenir.
Dosya Adı kısmına dosya adını yazıp sonuna .html eklenir.Örnek : index.html
Dosya Türü: Tüm Dosyalar seçilerek Kaydet basıyoruz.
Dosyayı kaydettiğimiz yere geliyoruz ve açıyoruz.Örnek ile ilk mantığı anlamış olmamız lazım
HTML Etiketleri Tek Tek Ele Alma
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.
2-) <HEAD>
Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür.
Meta etiketinde kullanılan parametreler;
name : Author, description ve keywords özellikleri tanımlanır.
http-equiv : yenile, expires, content ve content-style-type özellikleri
Size : Yazının boyu belirlenir.
Name : Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir.
» <meta name="author" content="Ömer">
» <meta name="description" content="sayfanın tanımını yazınız">
» <meta name ="description" content ="Dragons War Sıfırdan HTML Öğreniyorum (Temel Etiketler)">
» <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız.">
Örnek : <meta name="keywords" content="ForumCSDark,HTML,htmlders,"> Aralarında virgül kullanılarak çoğaltılabilir.
HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir.
Sıklıkla kullanılan meta etiketleri ve açıklamaları:
» <meta http-equiv=Content-Type content="text/htm; charset=windows-1254">
» <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
» <meta http-equiv=Content-Type content="text/htm; charset=utf-8">
Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır.
» <meta http-equiv="yenile" content="5; url=anasayfa.htm">
Sayfanın belirtilen süre sonra yenilenmesini sağlar. Yukarıdaki örnekte sayfa 5 saniye sonra yenilenir ve URL de belirtilen anasayfa.htm sayfası açılır. Eğer URL boş bırakılırsa aynı sayfa tekrarlanır.
» <meta name="robots" content="all veya none">
Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin için all, engelleme için none kullanılır.
Not : Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez.
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. 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 plan rengini belirlemek için kullanılır.
Kullanımı;
<body bgcolor=”blue”>…</body>
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>
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.
4-) <TITLE>
Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri <Head>….</Head> etiketleri arasında yer alır.
Kullanımı;
<title> görüntülenmesini istediğiniz başlık</title>
Evet arkadaşlar ilk dersimiz bu kadar konunun uzun olmaması için noktalıyorum.Diğer konuyu aynı konu isminde #2 olarak paylaşacağım.
Emeğe Saygı İçin Beğenmeyi Unutmayın
Sonraki Konular Listesi »
» Sıfırdan HTML Öğreniyorum (Listeleme Etiketler) #2
» Sıfırdan HTML Öğreniyorum (Metin ve Görünüm Düzenleme Etiketleri) #3
» Sıfırdan HTML Öğreniyorum (Bağlantı Oluşturma) #4
» Sıfırdan HTML Öğreniyorum (Tablolar) #5
Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir. Html komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi, çeşitli web tasarımı editörlerini kullanarak da oluşturulabilir.
Html komutları etiketlerden (tag) oluşur.
Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;
1-) Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>, <tag>…..</tag>
2-) Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)
3-) Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.<body>….</BODY> veya <Html>….</html>
4-) Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.
Metin belgesini açıyoruz.(Not Defteri,Notepad++ vb.) Notepad++ 7.8.1 İndir
Örnek olarak gösterecek olursam;
Kod:
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
İçerik kısmı burasıdır
</body>
</html>HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.
Kaydetme işlemi sırasında Dosya -> Kaydet seçeneğine tıklanır.
Dosya-Kaydet komutuna tıklandıktan sonra karşınıza gelen Farklı Kaydet penceresinden sırasıyla Dosya Adı ve Dosya türü belirlenir.
Dosya Adı kısmına dosya adını yazıp sonuna .html eklenir.Örnek : index.html
Dosya Türü: Tüm Dosyalar seçilerek Kaydet basıyoruz.
Dosyayı kaydettiğimiz yere geliyoruz ve açıyoruz.Örnek ile ilk mantığı anlamış olmamız lazım
HTML Etiketleri Tek Tek Ele Alma
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.
2-) <HEAD>
Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür.
Meta etiketinde kullanılan parametreler;
name : Author, description ve keywords özellikleri tanımlanır.
http-equiv : yenile, expires, content ve content-style-type özellikleri
Size : Yazının boyu belirlenir.
Name : Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir.
» <meta name="author" content="Ömer">
» <meta name="description" content="sayfanın tanımını yazınız">
» <meta name ="description" content ="Dragons War Sıfırdan HTML Öğreniyorum (Temel Etiketler)">
» <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız.">
Örnek : <meta name="keywords" content="ForumCSDark,HTML,htmlders,"> Aralarında virgül kullanılarak çoğaltılabilir.
HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir.
Sıklıkla kullanılan meta etiketleri ve açıklamaları:
» <meta http-equiv=Content-Type content="text/htm; charset=windows-1254">
» <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
» <meta http-equiv=Content-Type content="text/htm; charset=utf-8">
Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır.
» <meta http-equiv="yenile" content="5; url=anasayfa.htm">
Sayfanın belirtilen süre sonra yenilenmesini sağlar. Yukarıdaki örnekte sayfa 5 saniye sonra yenilenir ve URL de belirtilen anasayfa.htm sayfası açılır. Eğer URL boş bırakılırsa aynı sayfa tekrarlanır.
» <meta name="robots" content="all veya none">
Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin için all, engelleme için none kullanılır.
Not : Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez.
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. 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 plan rengini belirlemek için kullanılır.
Kullanımı;
<body bgcolor=”blue”>…</body>
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>
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.
4-) <TITLE>
Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri <Head>….</Head> etiketleri arasında yer alır.
Kullanımı;
<title> görüntülenmesini istediğiniz başlık</title>
Evet arkadaşlar ilk dersimiz bu kadar konunun uzun olmaması için noktalıyorum.Diğer konuyu aynı konu isminde #2 olarak paylaşacağım.
Emeğe Saygı İçin Beğenmeyi Unutmayın Sonraki Konular Listesi »
» Sıfırdan HTML Öğreniyorum (Listeleme Etiketler) #2
» Sıfırdan HTML Öğreniyorum (Metin ve Görünüm Düzenleme Etiketleri) #3
» Sıfırdan HTML Öğreniyorum (Bağlantı Oluşturma) #4
» Sıfırdan HTML Öğreniyorum (Tablolar) #5
