<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta http-equiv=content-type content=text/html;charset=iso-8859-9>
<meta http-equiv=content-type content=text/html;charset=windows-1254>
<meta http-equiv=content-type content=text/html;charset=x-mac-turkish>
<title>Sayfamızın başlığı</title>
</head> Buraya kadar olan kısımda klasik bir html yazılımına başladık.
<link rel="shorcut icon"... diye devam kısımda favicon.ico dosya adıyla sayfamızın iconunu tanımladık.
ve devamında türkçe karakterleri desteklemesi için tanımlamalar yaptık. buraya kadar yaptığımız kodların başka detayına girmeye lüzum yok. standart kopyala yapıştır.
---------------------------------
<body bgcolor="#ffffff" text="#ffffff" link="#3300CC" vlink="#3300FF" alink="#000033">
devam ediyoruz. burada body etiketi ile beraber renkleri de tanımladık, işte background (bgcolor) şu renk olsun. yazılar (text) bu renk olsun.. linkler (vlink) bu renk olsun ve tıklanmış linkler (alink) bu renk olsun dedik. renk kodları iki tırnak işareti arasında bulunan kısım.
google a html renk kodları yazdığında çıkacak sitelerden istediğin renklerin kodlarını bularak ayarlarsın.
---------------------------
<center> sayfamızdaki herşey ortalı olsun istersek bunu koyuyoruz. ve bir önceki satırda açtığımız ve sayfanın en sonunda kapayacağımız (</body diyerek) body etiketini en altta kapamadan evvel </center> şeklinde bu kodu kapıyoruz ki çalışsın.
<img src="baslik.jpg"> bu kod ile resim dosyamızı yayınlamış oluyor. html mantığı şudur: html dosyan neredeyse kullanacağın resimler aynı klasörde olursa dosya yolu olarak sadece kullanacağın resmin adı yeterlidir. fakat bir klasör oluşturup bunun içinden resim çağırmak istersen. klasörün adı/resminadı.jpg şeklinde yolu belirtirsin. bu klasör de yine html dosyanın yanında olmalı. mesela resimlerin olduğu klasöre fotolar diyelim. <img src="fotolar/resim.jpg"> gibi -----------------------------------------------
<a href="https://www.grafikerler.net">img src="grafikerlerbuton.jpg" /></a> bu çok önemli bir özellik. yukarıda ki kod da bir resme link verdik. biz burada ufak bi buton yaptığımızı düşünebiliriz. ismini grafikerlerbuton.jpg yaptık. dedik ki grafikerlerbuton resmine tıkladığımda, bana www.grafikerler.net adresini aç.. yada <a href="sayfa2.html">... deseydik, bizim oluşturduğumuz sayfa2 adlı html dosyaya yönlenecekti. bu sayede birden çok sayfa arasında dolaşabiliriz. mesela böyle bir buton yaptık. ve oluşturduğumuz sayfa2.html e gittik. oradan da ana sayfamıza dönmek için bir buton yapalım. butonun adı anasayfa.jpg olsun. (ve bizim ana sayfamızın adı da index.html olsun) <a href="index.html">img src="anasayfa.jpg" /></a> ------------------------------------------------
<a href="https://www.grafikerler.net">buraya tıkla/></a> aynı kodu kullanarak bu sefer resim yerine yazıya link verdik. çalıştığında "buraya tıkla" yazan bir metin olacak. ve tıklandığında istediğimiz sayfa açılacak.
------------------------------------------
<font face="Verdana" size="2"> yazılar yazılar ve yazılar </font> burada yazı karakterimizi seçtik ve büyüklüğünü tanımladık. "verdana" yazı karakterinin adı mesela "arial" diye de değiştirebilirsin. size kısmını arttırıp azaltarak istediğin boyutu belirlersin. --------------------------------
<strong>
YAZIMIZ BURAYA
</strong> bu kod ile yazıların kalın (bold) olur. kullanıp kullanmamak senin insiyatifinde. -----------------------------
bu kod ile yazıların yada resimlerin arasında, space tuşuna basmış gibi boşluklar oluşturursun. mesela 2 resim koyuyoruz. ve bunların arasında birer boşluk olsun istiyoruz.
<img src="resim1.jpg">
<img src="resim2.jpg">
----------------------------
<br> diyelim ki sen resimleri yan yana değilde alt alta dizeceksin, yada yazdığın yazılar alt alta olsun istiyorsun. o zaman <br> kodunu kullanıyorsun <img src="resim1.jpg">
<br> <img src="resim2.jpg">
bu şekilde yaptığında iki resim alt alta çıkar
satır 1 <br> satır 2 sonuç:
satır 1
satır 2 şeklinde olur..
----------------------
</center>
</body>
</html> yukarıda bahsetmiştim center, body ve html etiketlerini kapayarak kodların bittiğini söylüyoruz. bunu not defterinde yazıyorsun. ve kayıt ederken index.html olarak kaydediyorsun.
sadece bu kadar kod ve güzel resimler, grafik çalışmaları ile çok güzel siteler yapabilirsin. artı olarak table kodunu bilmekte ilerisi için devamını düşünürsen güzel olur. bence öğretmeni etkilemek küçük bir hedef, ama sen bu kodları anlarsan bu büyük bir başlangıç olur.
başarılar dilerim..
