Professional Documents
Culture Documents
<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>
<a href="http://fatihiho.meb.k12.tr"> Okul Sitesine girmek için tıklayın </a>
<br>
<body>
</html>
Yukarıda sol tarafta bizim elimizle yazdığımız kodlar bulunurken sağ taraftaki resimde web tarayıcımız bizlere bu kodları
farklı şekilde yani görsel bir şekilde göstermektedir.
Web tarayıcıları yani (Google Chrome, İnternet Explorer, Mozilla Firefox)
Kodları insanların görüp anlayabileceği şekilde göstermektedirler.
Web tasarımcılar işte bu kodları kullanarak bizlerin her gün girdiği,ziyaret ettiği siteleri tasarlarlar. Öğrendikten sonra
oldukça zevkli bir iş olan web tasarımı popülerliğini hergün artırmaktadır.
HTML SAYFASI NEDİR?
Html “hyper text markup language” kelimelerinin baş harfleridir.
Metin, resim, ses, görüntü ve diğer nesnelerin bir sayfada kullanılmasını sağlayan komutlar topluluğudur.
URL NEDİR?
Web adreslerinin resmi ismi URL'dir. Her Web sayfası sadece kendine ait bir URL'ye sahiptir.
Örnek:
http://fatihiho.meb.k12.tr
http://www.hepsiburada.com
(Url, “uniform resource locators” kelimelerinin baş harfleridir.)
ÖRNEK HTML SAYFASI
<html>…</html> Bütün web sayfaları <html> ile başlar ve </html> ile biter. Yani web sayfasında
bulunacak olan diğer bütün kodlarımız bu iki kodun arasına yazılır.
<title>…</title> Head bölümü içine yazlan Title kodu sayfanın başlığının yazıldığı bölümdür. Herhangi
bir web sayfasını açtığımızda sitenin en üstünde görünen başlık kısmıdır.
<body>…</body> Body (Türkçesi gövde demektir) Aslında web sitesinde görünen kısmı burasıdır.
<body>…</body> komutları arasına yazılır. Girdiğimiz bütün web sayfalarında
karşımıza çıkan herşey body tagı arasına yazılan kodlardan oluşmaktadır.
HTML belgesinin bütün içeriği bu kodlar arasına yazılır.
1- Temel Kodlarımız
<html>
<head>
<title>Deneme Sayfası</title>
</head>
<body>
Bu bir deneme sayfasıdır
</body>
</html>
1- <body background="kelebek.gif">
2- <body background=“C:\Windows\desktop\dosyalar\kelebek.gif"> | Bilgisayarımızda bulunan resmi web sayfasına ekler.
3- <body background="http://www.fatihiho.meb.k12.tr/kelebek.gif"> | Farklı bir web sitesindeki resmi web sayfamıza ekler.
Yukarıda sayfamıza resim ekleme kodlarını görüyorsunuz. Hepsi de aynı işi yapar aralarında fark yoktur. Tek fark resmin konumu yani
resmin nereden alacağının belirlenmesidir.
<html>
<head>
<title>fatih imam hatip ortaokulu </title>
</head>
<body background="c:\resimlerim\hayvanlar\kelebek.gif" >
</body>
</html>
B-) YAZI RENGİNİ BELİRLEME
Body içinde “text” deyimi kullanılarak sayfada bulunan yazıların renkleri ayarlanabilir. Sayfamızda bulunan yazıların renklerini bu şekilde
belirleyebiliriz.
<body text=“renk_adı”> şeklindedir.
Örnek:
<html>
<head>
<title>fatih imam hatip ortaokulu </title>
</head>
<body text="blue">
Merhaba <br>
</body>
</html>
Resimde de görüldüğü gibi Merhaba yazımız mavi olarak ekranda basılacaktır.
Yazı tipini Yazı tipini belirle Yazı tipini belirle Yazı tipini belirle
belirle
<basefont face=“Ravie”> <basefont face=“ Brush Script Std”> <basefont face=“Showcard Gothic”> <basefont face=“Chiller”> <basefont face=“Old
English Text MT”>
WEB SAYFAMIZA AÇIKLAYICI EKLEME
Sayfamızda istediğimiz yere açıklama bilgileri ekleyebiliriz. Eklediğimiz açıklamalar tarayıcıda (internet Explorer,chrome v.b) görünmez.
Açıklama yazısı “<!--” ile başlar ve “-->” ile biter.
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<!--aşağıda verilen satırda web sayfasındaki
metinlerin rengi değiştiriliyor. -->
<body text="blue">
Kodlama öğreniyorum<br>
Çok mutluyum...
</body>
</html>
Örnektede görüldüğü üzere <!--aşağıda verilen satırda web sayfasındaki metinlerin rengi değiştiriliyor. --> yazısı web sayfamızda görüntülenmemektedir.
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<!--aşağıda verilen satırda web sayfasındaki
metinlerin sitilleri ayarlanmaktadır.-->
<body text="red">
<b> Ben kalın yazıyım </b> <br>
<i> Ben Eğik yazıyım</i> <br>
<u> Benim altım çizili</u> <br>
<del> Benim üzerim çizili</del> <br>
<marquee> Ben kayan yazıyım </marquee> <br>
H<sub>2</sub>O <br>
2<sup>3</sup>=? <br>
</body>
</html>
Sol tarafta bulunan komutlarımız çalıştırıldığında sağ tarafta bulunan web görüntüsünü elde ederiz.
YAZI BÜYÜKLÜĞÜ
Web sayfamızda kullandığımız yazılarımızın farklı büyüklükte olması gerekebilir. Büyüklük ayarı için <font> deyimi içinde kullanılan “size”
parametresi kullanılır. (İngilizce bir kelime olan “size” kelimesinin Türkçe karşılığı “boyut,ebat” demektir.
<font size=x>..yazımız..</font>
burada “x” harfi yazımızın büyüklüğüdür.
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<!--aşağıda verilen satırda web sayfasındaki
metinlerin boyutları ayarlanmaktadır.-->
<body text="black">
</body>
</html>
Yazılarımızın boyutlarını font size tagını kullanarak değiştirebiliriz.
<font size=2 color="red" > Fatih İmam Hatip Ortaokulu </font> <br>
<font size=3 color="purple"> Fatih İmam Hatip Ortaokulu </font> <br>
<font size=4 color="blue" > Fatih İmam Hatip Ortaokulu </font> <br>
</body>
</html>
Yazılarımızın fontunu ve rengini ayarlamış olduk.
HTML RESİMLERİ
Bir resmi web sayfamıza yerleştirmek istiyorsak ilk olarak resim dosyamız hard diskimiz (sabit diskimiz) üzerinde olmalıdır.
Aynı şekilde internet üzerinden yayınlayacağımız resme ait dosya da İnternet’te olmalıdır.
RESİM TİPLERİ
İnternet üzerinden yayınlayacağımız resimlerin formatı:
–JPEG, JPG, BMP, GIF, XBM, PNG
WEB SAYFASINA RESİM EKLEME – (<IMG> VE “SRC” ÖZELLİĞİ)
<Img> tagının bitiş tagı yoktur, sadece özellikleri vardır. Bir sayfada resim görüntüleyebilmek için <ımg> tagının “src” özelliği kullanılır.
YANİ;
Doğru yazım: <img src=””>
Yanlış yazım: <img src=””> </img>
<img src=“url”>
<img src=“C:\kelebek.jpg”>
Not: URL web sayfası adresi demektir. ( www.google.com, www.n11.com, www.gittigidiyor.com gibi)
İki farklı şekilde web sayfamıza resim ekleyebiliriz.
A. <img src=”C:\resimlerim\cicekresimleri\papatya.bmp”>
B. <img src=”http://fatihiho.meb.k12.tr/resimler/papatya.bmp”>
Not: Web sayfamızın kayıtlı olduğu klasör ile resimlerimiz aynı klasörde ise şu şekilde de yazılabilir.
A. <img src=”papatya.bmp”>
<P> …….</P>
Paragrafları belirtmek için kullanılır.
<p>Burası bir paragraftır.</p>
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<body text="black">
</body>
</html>
Sol tarafta bulunan komutlar çalıştırıldığında sağ tarafta bulunan web sayfası ve paragraflarda bulunan yazıların hizalanması
oluşturulmuş olur.
HTML LİNKLERİ (BAĞLANTILARI)
Html sayfalarındaki bir sayfadan başka bir sayfaya gitmek için “hyperlink”leri kullanmalısınız.
Bunun için <a> tagı kullanılır.
<a>...</a> (anchor)
Kullanımı aşağıdaki gibidir.
<a href=“url”> Buraya tıklayınız </a>
<a href=“http://www.fatihiho.meb.k12.tr”> Okul sitesine bağlanmak için tıklayınız...</a>
Hemen hemen tüm nesneleri kullanarak linkler oluşturabilirsiniz. (resimler, ses dosyaları, görüntü dosyaları, metinler v.b.)
Not: URL dediğimiz kısaltma web sitelerinin isimlerine verilen genel addır. Yani ziyaret ettiğimiz milyonlarca site ismine URL diyoruz.
Örnek: http://fatihiho.meb.k12.tr , http://www.hepsiburada.com , https://www.facebook.com , https://twitter.com gibi
Yani bütün bu site isimlerine URL diyoruz.
Yada;
https://www.facebook.com/resimler/okul.jpg (Yan tarafta bulunan resim adresi de bir URL’dir. Yani facebookta bulunan bir resmin
adresini vermektedir bize.)
Örnek 1:
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<body text="black">
</body>
</html>
Örnek html linkleri eklenmiştir. Tıklandığı zaman bu bağlantı verdiğimiz adreslere gidecektir.
Örnek 2:
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<body text="black">
</body>
</html>
Yukarıdaki örnekte ise daha farklı bir HTML linki oluşturmuş olduk. Tıklayınız yazısı yerine bayrak resmi koyarak, resme tıklandığında
linkini verdiğimiz siteye yani Cumhurbaşkanlığı sitesine (http://www.tccb.gov.tr) bağlan demiş olduk.
Buna benzer örnekleri alışveriş sitelerinde daha çok görmekteyiz. Örnek buzdolabı resmine tıklandığında birçok buzdolabı, çamaşır
makinası resmine tıkladığımızda ise sitede bulunan bütün çamaşır makinalarını listelemiş oluruz. Sitelerin daha güzel görünmesi için
buna benzer uygulamalar her web sitesinde büyük ölçüde kullanılır.
<MAİLTO> KULLANIMI
Örnek 3:
<html>
<head>
<title>Web sayfası yapıyorum...</title>
</head>
<body text="black">
</body>
</html>
Buradaki örneğimizde ise bağlantıya tıklandığında karşıdaki kişiye mesaj göndereceğimiz bir ekran açılmaktadır. Genellikle iletişim
sayfalarında kullanılır bu özellik.