2 - HTML Temel Etiketleri

-2-
HTML Temel
Etiketleri
Öğr. Gör. Aslan BALAN
Harran Üniversitesi,
Viranşehir MYO
KONU BAŞLIKLARI
 GİRİŞ
 HTML Komut Yapısı
 Yazım Kuralları
 Kullanım Biçimi
 <html> Etiketi
 <head> Etiketi
 <body> Etiketi
 <title> Etiketi
 <meta charset=”utf-8”> Etiketi
  Etiketi
GiRİŞ
 HTML (Hyper Text Markup Language) web sayfalarının
hazırlanmasında kullanılan dildir.
 Bir web sayfası resim gibi değildir. Sayfanın arka planında
ilk bakışta anlamakta zorlanılacak komutlar bulunmaktadır.
Bu komutlar sayfa içinde bulunan her şeyin nasıl
gösterileceğini tarayıcıya anlatmak için kullanılır. Yani
sayfada bulunan resim, flash, yazı gibi materyallerin yan
yana anlaşılır görünmesi için HTML kullanılmak zorundadır.
 Amatör veya profesyonel olarak web tasarımı ile
uğraşanlar HTML’i mutlaka kullanmışlardır. HTML yazma işini
web tasarımcısı bazı programlar (Frontpage,
DreamWeaver, Namo vb.) kullanmaktadırlar.
 HTML için dilden ziyade, kabaca metinleri ya da verileri
biçimlendirmek ve düzenlemek için kullanılan komutlar
dizisi denilebilir.
GiRİŞ
 Bu ünitede Notepad++ uygulamasının kurulumu, kullanım
alanları hakkında ön bilgi sahibi olabileceksiniz.
 Artık bilgisayar eğitimi alamayan birçok insan HTML
etiketlerini kullanarak bazı web sayfalarını
geliştirebilmektedirler. Bunun için öncelikle temel HTML
etiketlerini bilmek gerekir.
 Birbirine benzeyen birçok web sayfalarında logo, ana
menü, içerik, sol yada sağ tarafta yer alan yan menüler,
telif hakkı ve iletişim bilgisi gibi birçok ortak alanlar web
sayfalarının genel sayfa düzeni ile elde edilebilmektedirler.
 Bu ünitede web sayfalarının genel düzeni nasıl tasarlanır
konusunu öğrenebileceksiniz. Birçok web sitesinde tercih
edilen listelerin nasıl elde edilebileceğini ayrıntılı bir şekilde
göreceksiniz.
HTML Komut Yapısı
 HTML’in bir işaretleme dili olduğundan ve herhangi
bir text editörle (Notepad,Word,...)
hazırlanabildiğinden daha önceki dersimizde
kısaca bahsetmiştik.
 Fakat bunun yerine WEB sayfası tasarımı için
DreamWeaver, FrontPage, Netscape Composer
gibi gelişmiş araçlar da kullanılabilir.
 Bir html dosyası hazırlandıktan sonra kaydedilirken
‘dosya_adi.htm’ ya da ‘dosya_adi.html’ olarak
kaydedilmelidir.
HTML Komut Yapısı
Yazım Kuralları
 Html’de komut yazarken belirli yazım kurallarını dikkate
almamız gerekir.Bunlar kısaca şöyle sıralanabilinir:
1. Etiketler BÜYÜK ya da küçük harfle yazılabilir
2. Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
3. Komutlar < ve > işretleri arasında yazılır ve ‘etiket (tag)’
adını alır.
4. WEB sayfalarına isim verirken, sayfanın yapacağı işe
uygun isimler verilmelidir.
5. Eğer sayfa isminde birden fazla kelime yer alacaksa
dosya ismine verilecek kelimeler arasına tire (-) ya da
altçizgi (_) karakteri tercih edilmelidir. Kesinlikle İçerisinde
boşluk karakteri tercih edilmemelidir.
HTML Komut Yapısı
Kullanım Biçimi
 <etiket_adi> yada ingilizcesi <tag>
 Örnek:
<HTML>
<HEAD>
<TITLE>
…
HTML Komut Yapısı
Kullanım Biçimi
 Bir etiket <etiket_adi> şeklinde başlar ve
genellikle </etiket_adi> şeklinde biter.
 Örnek: <HTML>……</HTML>
 Etiketler iç içe yer alır ve en içteki
etiketten başlanılarak kapatılır.
HTML Komut Yapısı
Kullanım Biçimi
 <tag_1>
<tag_2>
......
</tag_2>
</tag_1>
 Örnek:
<HTML>
<BODY>
......
<FORM>
......
</FORM>
</BODY>
</HTML>
HTML Komut Yapısı
Kullanım Biçimi
 Bir etiket parametre kullanarak biçimlendirilir
ve bu parametrelere tırnak (" ") işaretleri
arasında değer atanır.
 Değerle Parametre arasında eşittir (=) işareti
kullanılır.
<tag_adi parametre_adi ="deger">

 Örnek:
<body bgcolor="blue">
HTML Komut Yapısı
 Web sayfasında standard olarak bulunması gereken kodlar
şunlardır.Bunlar sayfada mutlaka vardır.Bu kodlarla tarayıcı
bunun bir WEB sayfası olduğunu anlar ve ona göre
görüntüler.
 <html>
<head>
<title>
Sayfanın Başlığı
</title>
</head>
<body>
Sayfanızın tüm içeriği: resim, yazı, video, vb.
</body>
</html>
HTML Komut Yapısı
Kullanım Biçimi
Aynı zamanda,
 Görünümü Web tarayıcısında şu şekilde
görünecektir.
NOTEPAD++ UYGULAMASI
 HTML ve CSS kodlarının konu anlatımları ve örneklerinde
Notepad++ uygulaması kullanılacaktır.
 Ücretsiz ve halka açık olan Notepad++ uygulaması kendi
resmi internet sitesinden indirilebileceği gibi; ayrıca
“gezginler”, “tamindir” gibi birçok yerli uygulama
deposundan da temin edilebilmektedir.
 HTML ve CSS kodlarını yazabileceğiniz çok sayıda editörler
arasında Notepad++ uygulaması yaygın tercih nedenidir.
Bunun nedeni basit oluşu ve kodlarının renklendirme
özelliğine sahip oluşu, yazım hatası olması halinde görsel
uyarılar vermesi, birçok programlama dilli tarafından
destekleniyor olmasının yanı sıra Türkçe dâhil birçok arayüz
dilini barındırıyor olmasıdır.
Bu programı aşağıdaki şu linkten indiribilirsiniz;
 https://notepad-plus-plus.org/downloads/
TEMEL ETİKETLER
 Günümüzde insanlar HTML’den ücretsiz, basit bir editör
ve basit birkaç komuttan yararlanarak kendi web
sitelerini geliştirebilmektedirler.
 Yazılan kodlarla basit bir tarayıcıya sahip biri cep

telefonu, tablet, bilgisayar ve diğer akıllı birçok cihazda
çalıştırılan web sayfaları HTML’in başarısını ön plana
çıkarmaktadır.
 Yaptığınız HTML sayfaları tarayıcılar aracılığı ile rahatlıkla

görüntülenebilir.
TEMEL ETİKETLER
 Temel HTML etiketlerini aşağıdaki tabloda izlenebileceği
gibi özetlemek mümkündür.
<!doctype html> Sayfanın en başında yer alır ve sayfanın HTML5 ile tasarlandığını
anlamına gelir.
<html>…</html> Bu kod tarayıcıya (browser’a) HTML belgesinin başladığı ve bittiği yeri
bildirir. Bütün diğer kodlar bu iki kod arasına yazılır.
<head>…</head> HTML belgesi ilk bölümden oluşur. Bunlardan birisi olan head bölümüne
yazılanlar metin olarak ekranda gözükmezler.
<body>…</body> HTML belgesinin ikinci bölümünü oluşturan kısım ise body dir. HTML
belgesinin bütün içeriği bu kodlar arasına yazılır. Ekranda gösterilmesi
istenen herşey bu etiketler arasına yazılır.
<title>…</title> Head bölümü içine yazılan Title kodu sayfanın başlığının yazıldığı
bölümdür. Burada yazılanlar tarayıcının (browser) üst kısmında tarayıcı
(browser) adıyla gösterili
<html lang= “tr”> Sayfada tercih edilen dili belirtir. Türkçe sayfalarda “tr” kullanılırken,
İngilizce sayfalarda “en” kullanılır. <html> etiketinin bir özelliğidir. Yani,
ayrı bir komut değildir.
<meta charset=”utf-8”> Türkçe karakterlerin düzgün görünmesini sağlar. <head> tagı içine
yazılmalıdır.
<!doctype html> Etiketi
 Belge türünün belirlemek için kullanılan etikettir. Bu
etiket ile HTML5 ile daha kullanılışlı ve basit hale gelmiş
ve önceden yaşanan belge türü karmaşasını ortadan
kaldırmış ve geriye doğru uyumluluğu sağlamıştır.
 Bu etiket HTML5 ağaç yapısı içinde belgenin en başında

olması gerekir.
Not: diğer html teknolojilerinde bu etiketin kullanımı merak

ediyorsanız aşağıdaki linke tıklayınız:
https://www.w3.org/QA/2002/04/valid-dtd-list.html
<html> Etiketi
 <html> bir WEB sayfasında bulunan ilk etikettir.
 Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği

yeri bildirir.
 Bütün HTML kodları bu etiketin içinde yer almalıdır.
 Bu etiketin hiçbir parametresi YOKTUR.

<head> Etiketi
 HTML belgesinin ilk bölümüdür.
 WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı

karakterler kümesi, link özellikleri burada tanımlanır.
 Head etiketinin yorum aralığında <meta> etiketi yer alır.
 Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır.

<head> Etiketi
 Meta etiketinde kullanılan parametreler aşağıdak tabloda
verilmiştir.
<head> Etiketi
 Meta Etiketinin Parametre Örnekleri:
<head> Etiketi
<head> Etiketi
<body> Etiketi
 HTML belgesinin bütün içeriği burada yer alır. Buraya metinler,
resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir.
Parametreleri şu şekildedir:
<body> Etiketi
 <BODY> etiketinin parametleri ile ilgili örnek:
<body bgcolor="#0000ff"> sayfanın arka planını mavi yapar..

<body bgcolor="blue"> sayfanın arka planını mavi yapar..
<body background="resim.jpg">
Ya da
<body bgcolor="#FFFFFF" text="#000000" vlink="#00FF00"

alink="#FF0000">
... ..
….
</body>
<title> Etiketi
 Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır,
tarayıcının sol üst bölümünde bulunan başlık çubuğunda
görüntülenir.
Örneğin:
<title> Etiketi
 Kodu çalıştırdığımızda Web Tarayıcısında ki görünümü:
<title> Etiketi
 Arama motorları “spider/örümcek” adı verilen yazılımlar
aracılığı ile sürekli dünya üzerindeki web sunucuları dolaşırlar
ve bu sunucularda bulunan web sitelerindeki bazı bilgileri veri
tabanlarına kaydederler. Yani, yaptığınız site sunucu üzerine
konduğu anda arama motorlarının hedefine girer ve arama
sonuçlarında listelenerek ziyaretçilere yönlendirilirler.
 SEO işi yapan kişi ve kurumların amacı genelde siteleri arama
sonuçlarının ilk sayfasında veya ilk sırasında tutmaktır.
 SEO (Search Engine Optimization) açısından bilinmesi gereken
en önemli konulardan biri sayfa başlığı ve <title> etiketidir.
Google, Bing ve Yandex gibi arama motorları bir web
sitesindeki her sayfanın başlık içeriğini, yani <title> etiketi
içindeki bilgileri veri tabanlarına kaydeder ve bu etiket içinde
geçen kelimelerden biri aranırsa o sayfa listelenir.
<title> Etiketi
 <title> etiketine yazılanlar arama motorları tarafından
listelenirken kaçıncı sırada olunması gerekliliği ilgili arama
motorunun algoritması tarafından belirlenir.
 Başlık içeriği kısa, tanımlayıcı ve her sayfada farklı olmalıdır.

Başlık içeriği kısa olmalıdır çünkü arama motorları genelde
başlık içeriğinin ilk 60 karakterini dikkate alırlar. Daha sonraki
karakterler genelde ihmal edilirler.
 Sayfa başlığı sayfa içinde tanıtılan ürün ve hizmetleri

barındırmalı yani, bir tür sayfa özeti gibi olmalıdır.
<meta charset=”utf-8”> Etiketi
 Bu etiket Head etiketi arasında yer alır ve sayfa
hakkında tarayıcılara ve arama motorlarına bazı bilgiler
iletir. HTML5 ile gelen bu özellikle karakter kümesi
tanımlanır.
 Eğer charset tanımlaması yapılmaz ise sayfa yer alan

bazı karakter ya da sembollerin görünümünde ciddi
problemler yaşanabilir
 Etiketi
 Geliştirdiğimiz web sayfasındaki bazı etiketlerle ilgili
açıklama yapmak durumunda kalırsak aşağıdaki formatta bir
açıklama yapmamız gerekir.
<!- -Açıklama bu şekilde yapılmalı- ->
 Yaptığımız açıklamalar tarayıcılar (browser) tarafından

yorumlanmazlar. Açıklamalar sadece web sayfası geliştiriciler ilerde
kendileri ya da bazı faydalanmasını düşündükleri kişiler için hatırlatma
amaçlı metinlerdir.
 Kritik özellikte web sayfasında kolayca unutulabilecek kodlar
açıklama ile ilerde hatırlanabilir. Günümüz web sayfası geliştiricilerinin
birçoğu açıklama kısmını ihmal etmektedirler ve buda ilerde bazı
problemlerin çözümünde ciddi bir eksiklik olarak ortaya
çıkabilmektedir.
 Ziyaret ettiğimiz birçok profesyonel web sayfaları incelendiğinde
önemli sayıda açıklamaların yer aldığı gözlenebilir.

2 - HTML Temel Etiketleri

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 - HTML Temel Etiketleri

Uploaded by

Copyright:

Available Formats

-2-

<tag_adi parametre_adi ="deger">

 Yazılan kodlarla basit bir tarayıcıya sahip biri cep

 Yaptığınız HTML sayfaları tarayıcılar aracılığı ile rahatlıkla

 Bu etiket HTML5 ağaç yapısı içinde belgenin en başında

Not: diğer html teknolojilerinde bu etiketin kullanımı merak

 Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği

 Bütün HTML kodları bu etiketin içinde yer almalıdır.

 Bu etiketin hiçbir parametresi YOKTUR.

 WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı

 Head etiketinin yorum aralığında <meta> etiketi yer alır.

 Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır.

<body bgcolor="#0000ff"> sayfanın arka planını mavi yapar..

<body bgcolor="#FFFFFF" text="#000000" vlink="#00FF00"

 Başlık içeriği kısa, tanımlayıcı ve her sayfada farklı olmalıdır.

 Sayfa başlığı sayfa içinde tanıtılan ürün ve hizmetleri

 Eğer charset tanımlaması yapılmaz ise sayfa yer alan

<!- -Açıklama bu şekilde yapılmalı- ->

 Yaptığımız açıklamalar tarayıcılar (browser) tarafından

You might also like