HTML Nedir - Gülcay KORKMAZ

HTML Nedir?
HTML, “Hyper Text Markup Language” sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve
web' in temel dilidir. “Büyük metin İşaretleme Dili” web sayfalarının oluşturulması için kullanılan bir dizi
komutlar - kodlar bütünüdür. Diğer bir anlatımla; belgelerin içindeki metinlerin tarayıcıda (browser)
nasıl görüneceğini ve işlevsel olacağını düzenleyen işaretlerdir.
HTML kullanarak çalıştırılabilir bir dosya elde edemezsiniz. EXE ya da COM uzantılı bir
dosyanız olmaz. Dosyanız bilgisayarın anlayacağı dile dönüşemez.
Bir HTML belgesi düz metinlerden oluşan bir dosyadır. Yani bu dosyaları, Windows ortamında
NotePad (Not Defteri) programı ile, Mac ortamında Simple Text programı ile oluşturabilirsiniz. Teorik
olarak, web sayfası hazırlamak için, HTML biliyorsanız bu programlardan başka hiçbirşeye ihtiyacınız
yoktur.
Bir web sitesinin oluşturulması sırasında da HTML dışında; ASP,PHP, CSS, JavaScript,
VBScript, Flash gibi programlarda kullanılır.
HTML Etiketleri tag’leri arasına yazılır ve bittiğinde de mutalaka bu tag’ler kapatılmalıdır.
(örnek: <html>……………..</html>) birçok tag aynı zamanda çeşitli attribute (yüklem)’larla da
kullanılır. (örnek: <font color=”red”> ………………………….</font> font tag’Ieri arasında yazılan yazıya
kırmızı rengi Verdi)
Bilinmesi Gereken Terimler
Internet
Internet sözcüğü, İngilizce Inter Network of Networks (Ağlar Arası Ağ) sözcüklerinden
türetilmiştir. Internet terimi ile, birbirine çeşitli bağlantı tipleri ile bağlı, yeraltı, yerüstü kablolar,
uydular aracılığıyla, sürekli birbirleriyle bir şeyler konuşup duran binlerce bilgisayarın
oluşturduğu dinamik bir ağdan söz etmiş oluyoruz.
IP (Internet Protocol) Numarası
IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir
protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar
iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. IP adresi her biri
noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara setidir. Örneğin:
192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile (daha kolay hatırlamanız için),diğer
bilgisayarlarla iletişim kurduğunda IP adresini kullanır.
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
Internet Alanı (Domain)
İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi).
Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain
name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o
bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını
akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır
(www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda,
tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP
numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi
sağlayacaktır.
HTTP
HyperText Transfer Protocol, Hipermetin Aktarım Protokolü. Sayfaların adreslerini
yazarken, "http://" başlarız. Bu protokol, günümüzde "internet" dediğimiz ortam üzerinde web
sayfalarının çeşitli istemcilere iletimi sırasında bir bütünlük sağlanması açısından oluşturulmuş
bir standartlar dizisidir. İstemci: Web sayfasını kullananlar, sunumcu: Web sayfasını
yayınlayan makine.
FTP
File Transfer Protocol, Dosya Aktarım Protokolü... Yukarıda sözü edilen çeşitli istemciler
üzerinde onlarca programdan herhangi biriyle hazırlanan web belgeleri ya da çeşit sayısı
yüzleri bulan diğer dosyaların web' de yayınlanması için sunumcu bilgisayarlara aktarılması
gerekmektedir.
WWW (World Wide Web) : Geniş alan ağı
İnternet adreslerinde görülen kısaltmalar
gov: Hükümet kurumları (government)
edu: Eğitim kurumları (education)
org: Ticari olmayan kuruluşlar (organization)
com: Ticari kuruluşlar (company)
mil: Askeri kurumlar (military)
net: Servis sunucular (network)
ac: Akademik kuruluşlar (academic)
int: Uluslararası kuruluşlar (international)
WEB Tarayıcıların Çalışması (örnek: İnternet explorer)
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
Her bilgisayar üzerinde WEB sayfası adı verilen elektronik dosyaları saklar ve siz kendi
bilgisayarınızdan bu bilgilere erişebilirsiniz. WEB sizin zengin bir ortamda iletişim kurmamızı sağlar.
WEB üzerinde bilgilere metin, renkli çizim, resim, ses ve hatta video ortamlarına erişebilirsiniz.
WEB istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci,
uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. Örneğin; Milli Eğitim
Bakanlığının WEB sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan WEB
sayfalarına erişmek istediği mesajını yollamıştır. Milli Eğitim Bakanlığının WEB sunucusu istediğiniz
bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır. Sizin WEB tarayıcınız gelen bilgileri
yorumlar ve sizin ekranınızda anlaşılır bir şekilde gösterir.
Teknik olarak tarayıcıların neler yaptığını iki madde de toplayabiliriz. Tarayıcınız sizin
bağlandığınız WEB sunucudan yaptığınız dosya isteğini ağ (network) üzerinden size yani kullandığınız
bilgisayara ulaştırır. Tarayıcının ikinci görevi ise yaptığınız isteği, yani WEB sunucudan gelen dosyayı
size, yani monitörünüze nasıl yansıtacağını, formatlamasını bilmesidir. İlgili WEB sayfasının adresi
yazıldıktan sonra, tarayıcı ilgili WEB sunucuyu bulur ve sayfayı ister. Sunucu ilgili sayfayı “tag” denilen
komutlar topluluğu olarak istemci makineye gönderir. İstemci makinedeki tarayıcı bu sayfayı alır ve
gelen komutları yorumlar ve anlaşılır bir şekilde gösterir.
WEB Tasarımı
Sayfa Hazırlarken Dikkat Edilecek Noktalar
Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla
Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.
Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin vebu dizin
içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu
bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla
unutulmamalıdır.
WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız. Birçok WEB
sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak
adlandırılmasını ister.
Yeni Bir Web Sayfa oluşturmak
HTML belgesi oluşturmak için not defterinden yararlanabilirsiniz.
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
Oluşturmuş olduğunuz HTML belgesini kaydediniz. Dosya menüsünden Kaydet seçilir. HTML
belgesini kaydederken uzantısı “.html” veya “.htm” olacak şekilde yazmalısınız. Aksi halde text dosyası
olarak kaydedecektir.
HTML (HYPER TEXT MARKUP
LANGUAGE) TEMEL ETİKETLERİ
HTML Komut Yapısı
HTML diğer programlama dillerinden farklı olarak sadece tasarım için kullanılmaktadır. HTML
herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı
için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir.
Yazım kuralları
- Komutlar büyük ya da küçük harfle yazılabilir.
- Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
- Komutlar <
> işaretleri arasında yazılır ve “etiket (tag)” adını alır.
HTML Dosyasının Bölümleri
1-
<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
2-
<head>:Bu etiket sayfa başında yapılacak işleri içerir. </head>şeklinde
sonlandırılır.
3-
<title>: Bu tag ile sayfada başlık çubuğu üzerinde görüntülenmesi istenen
4-
<body> : sayfa içeriğinizi taşıyan etikettir. Sayfa içeriğinizi oluşturan etiketler
ifade
bitince, </body> şeklinde BODY bölümü sonlandırılır ve HTML belgeniz biter (</html>)
Not: html kodlarını kapatmak için (sayfada yayınlanmaması için) <!--
……………. --
> işaretleri kullanılır.
Bağlı Özellikleri
background="URI"
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
Belgenin artalanında görüntülenecek grafik dosyasının yolu ve adı.
bgcolor="color"
Belgenin artalan rengini belirten renk kodu ya da renk adı.
text="color"
Belgenin içeriğindeki metnin renk kodu.
link="color"
Bildiğiniz gibi, eğer ayarlarla oynamadıysanız, bir web sayfasında verilen bağlantı
metinleri mavi renkte gösteriliyor. Bu özellikle belgede verilen linklere ait metinlerin renklerini
siz belirlersiniz.
alink="color"
Bu özellik, o anda aktif olan bağlantı içeren metnin rengini belirlemenizi sağlar.
vlink="color"
Daha önce ziyaret edilen linkleri belirten metinlerin rengi değişir. Bu özellikle bu rengi de
siz belirleyebilirsiniz.
onload="script"
Belge yüklendiğinde çalıştırılmak istenen bir script varsa, bu özellikle belirtilir.
onunload="script"
Ziyaretçi aktif sayfadan başka sayfaya gitmek üzere hareketini gerçekleştirdiğinde
çalışması istenen script bu özellikle belirtilir.
- <body bgcolor=”…..”> …….</body> : sayfa zemin rengi yüklemi .
- <body background=”…..”>: Sayfaya zemin resmi verir.
- Html kodlarında alt klasörden bir sayfaya ya da bir dosyaya erişmek için
klasörün adı ve “/” işareti kullanlılır.( Örnek: <body
background="jpg/ACRICEPR.GIF">) sayfanın zemin resmini jpg alt klasöründen aldık.
- Bir üst dizinden dosya alınacaksa format şu şekilde olmalıdır: (örnek: <body
background="../ACRICEPR.GIF">) İki nokta bir üst dizini simgeler.
5-
<br>: bir alt satıra geçmek için kullanılan tag dir.
6-
<center>: İfadeleri sayfada ortalar. Örnek: <center>
Gülcay KORKMAZ
</center>
7-
<H>: Yazıların puntosunu ayarlar.
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
<font>: Sayfadaki yazılara biçim veren tag’dir. Çeşitli parametreleri
8bulunmaktadır;
- <font size=? > : yazının puntosunu ayarlar
- <font color=”…”>: Yazının rengini ayarlar
- <font face=”…..”>: Yazının stilini ayarlar.
Örnek: <font size=5; color="blue"; face="Verdana">
9-
<img src>: Sayfaya resim ekleyen tag’dir (örnek: <img src="jpg/bayrak.gif"> )
10-
<hr>: Sayfaya yatay çizgi oluşturur.
- <hr width=?>: Çiziginin uzunluğunu belirler.
- <hr size=?>: çizgnin kalınlığını belirler.
Örnek= <hr width=500; size=8; color="white">
11-
<ul> ve <ol>: Satırlara madde ve numara işareti veren tag’lerdir.
- <ul>: madde imi verir; bu tag ile birlikte her satırın başına <li> tag’I
eklenmelidir.
- <ol>: numara imi verir.
<ol type=”I”>: Romen rakamı ile madde verir.
<ol start=”3”>: 3. maddeden itibaren numara verir.
12-
<b> ve <u> : <b> tag’i yazıları koyu yapar, <u> tag’i yazıların altını çizer.
13-
<a> tag’i : İfadelere ya da simgelere link vermek için kullanılan tag’dir.
Kullanımı: <a href=”……………………” > ifade </a>
1- Aynı site içinde başka sayfalara:
Örnek1: <a href=”iletisim.htm> iletişim için tıklayın </a> --- açıklaması: linkin verildiği
htm sayfası ile aynı klasörede bulunan iletisim.htm adlı sayfayı çağırır. Sayfada “iletişim için
tıklayın” ifadesine link verilmiştir.
2- Farklı Sitelere:
Örnek2: <a href=”www.meb.gov.tr”> Milli Eğitim bakanlığı sitesi </a>
NOT: Belirtilen adresteki sayfayı başka pencerede açmak için “target” parametresi
kullanılır.
(örn: <a href=”www.meb.gov.tr” target=”blank” > Milli Eğitim bakanlığı sitesi </a>
3-
Mail göndermek için oluşturulan link:
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
Örnek3: İletişim için bize <a href="mailto:[email protected]"> m@il </a>
Gönderin
4-
Aynı Sayfa içinde farklı yerlere : Bunun için iki basamaklı işlem yapılmalı
- Link verilen yere örnek: Bu sayfadaki resmi kurum linklerine gitmek için
<a href="#resmi"> tıklayın </a>
- Gidilecek yere örnek : Resmi Kurumlar <a name="resmi"></a>
TABLO İŞLEMLERİ
Tablo oluşturmak için <table> …….</table> tag’I kullanılır. Tablo içinde kullanılan Tag’lar ve
parametreleri ise;
1-
<tr> : Satır ekleme tag’idir.
<tr width=”…” > satırın genişliği
-
<tr height=”…”> satırın yüksekliği
-
<tr valign=”top”> satır içindekileri en başa hizalar (yatay hizalama)
-
<tr valign=”center”> satır içindekileri ortaya hizalar
-
<tr valign=”bottom”> satır içindekileri en alta hizalar
-
<tr bgcolor=”…”> satıra zemin rengi verir.
<td> : sütun ekleme tag’idir.
2-
3-
-
-
<td width=”…” > sütunun genişliği
-
<td height=”…”> sütunun yüksekliği
-
<td align=”left”> sütun içindekileri sola hizalar (dikey hizalama)
-
<td align=”center”> sütun içindekileri ortaya hizalar
-
<td align=”right”> sütun içindekileri sağa hizalar
-
<td bgcolor=”…”> sütuna zemin rengi verir.
<Table> parametreleri:
-
<table border=”…”>: tablonun çerçeve çizgisinin kalınlığını belirler. (0
ise çerçeve sayfada görüntülenmez)
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
-
<table bordercolor=”…”> tablo çizgisine renk verir.
-
<table bgcolor=”…”> tabloya zemin rengi verir.
-
<table background=”…….”>: Tabloya zemin resmi ekler.
e_post@: [email protected]
web: http://www.egitimde-bilisim.com
HTML ETİKETLERİ TABLOSU (Toplam 91 Adet)
A
ABBR
AREA
B
ACRONY
M
COLGROU
P
DIV
BASEFON
T
APPLET
BDO
BODY
BR
BUTTON
CENTER
CITE
CODE
COL
DD
DEL
DFN
DIR
DL
DT
EM
FIELDSET
E
CAPTION
S
BASE
BLOCKQUOT
BIG
ADDRES
FRAMES
FONT
FORM
FRAME
H2
H3
H4
H5
H6
HEAD
HR
HTML
I
IFRAME
IMG
INPUT
INS
ISINDEX
KBD
LABEL
LEGEND
LI
LINK
MAP
MENU
META
NOFRAME
NOSCRIP
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
S
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
U
UL
S
ET
T
H1
OBJECT
VAR
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
e_post@: [email protected]
web: http://www.egitimde-bilisim.com