HTML’ye GİRİŞ Dr. Devkan Kaleci Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Konular HTML Nedir? Niçin Web Sitesi? Web Sitesi Hazırlanırken Dikkat Edilmesi Gerekenler HTML’ye Giriş Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML Nedir? HTML, “Hyper Text Markup Language” kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML metinleri ya da verileri biçimlendirmek, düzenlemek için kullanılan komutlar dizisidir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML Nedir? Metin, resim ve diğer nesnelerin bir web sayfası üzerinde nasıl görüntülendiğini ve web sayfasının, bağlantıların birleşimiyle nasıl oluştuğunu belirten dili ifade eder. HTML, dilinde binary veya hexadecimal kodlar yok. Her şey metin tabanlıdır ve bir HTML dokümanı oluşturmak için ihtiyaç duyulabilecek tek şey bir metin editördür. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Niçin Web Sitesi? Bir Web sayfası sadece onu okumak isteyen hedef kitleye ulaşır. Web sayfası etkileşimli bir aygıttır. Kullanıcının o Web sayfasına bağlanmasının tek nedeni, o konu hakkında daha çok bilgi sahibi olmaktır. Web sayfaları hazırlamak için kağıt ve mürekkebe ihtiyaç yoktur. Tek masraf, telefon hat ücreti ve sizin kontrol dışında gerçekleşebilecek problemler olacaktır. Web sayfaları yaratırken geleneksel bir sayfa düzeni takip edilmesi gerekmez. Hayal gücünüzü olabildiğine kullanabilirsiniz. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Niçin Web Sitesi? Web sayfaları kolayca düzeltilip tekrar yayımlanabilir. Devamlı bir uğraş içinde olunmasına gerek yoktur. Web sayfaları, 24 saat boyunca tüm dünyaya açık olacak ve herkese "etkileşimli" bir hizmet verecektir. Web sayfaları, önceden seçilmiş bir birey grubunun fikirlerini ve beklentilerini öğrenmek için kullanabilir. Bir web sayfasının kaderi diğer medyalar gibi bir çöp kutusunda sonlanmaz. Çünkü onlar "sonsuza kadar kullanılabilecek" şekilde yaratılmıştır. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Web Sitesi Hazırlarken Dikkat Edilmesi Gerekenler Sitenin yayınlanacağı bir Host Sitede yayınlanacak sayfalar Hazırlanılan sayfanın tipine uygun yazı, resim yada diğer animasyonlar. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Web Sayfası Hazırlarken Dikkat Edilmesi Gerekenler Klasör ve dosyalara verecek isimlerde; Türkçe karakter kullanılmaz. (ç,ğ,ö,ü,İ,ı,ş yerine c,g,o,u,i,s kullanılabilir). Genelde büyük harfler kullanılmaz . İlk giriş sayfasının adı index.html olmalıdır. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML’de TAGLAR (Etiketler) HTML komutlarının her biri Tag (Etiket) olarak adlandırılır. HTML tagları, html sayfalarını oluşturmak ve düzenlemek için kullanılırlar. <tag>.....</tag> şeklinde kullanılırlar. Tagların arasında kalan metne tag içeriği denir. Tag’ler büyük harfle veya küçük harfle yazılabilirler. Fakat genelde küçük harf tercih edilir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML’ye Giriş temel <html> metni baş <head> metni Her HTML belgesi belirli sayıda standart html tagları içermelidir. Bir HTML belgesinde olması gereken kısımlar şunlardır. temel <html> metni baş <head> metni gövde <body> metni Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML’ye Giriş <html> <head> başlık kısmı <title> başlık </title> </head> <body> gövde kısmı </body> </html> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
HTML’ye Giriş <html>...</html> tarayıcıya HTML dosyasının başladığını ve bittiğini belirtir. Diğer tüm kodlar bu iki etiket arasında yer alır. Bir HTML belgesi iki bölüme ayrılır. head (baş) ve body (gövde). <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır. Meta ve title gibi etiketler burada yer alır. <body>...</body> arası ise sayfanın gövde bölümüdür. Ekranda gösterilecek kısımlar bu taglar arasında yer alır. <title>...</title> sayfanın başlığının yazıldığı yerdir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
İlk Web Sayfası <html> <head> <title>İlk Sayfam</title> </head> <body> Sayfama Hoş Geldiniz. </body> </html> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
İlk Web Sayfası Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Baş (Head) Bölümü <html> <head> <title>Devkan Kaleci</title> <meta name="description" content= " İnönü Üniversitesi, Eğitim Fakültesi, BÖTE Bölümü, Fizik, Bilgisayar, Öğretim Üyesi, Ultrasonik"> </head> ………… Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Meta Etiketi Arama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir. Örneğin "İnönü Üniversitesi" sitesinin Meta etiketleri şöyle olabilir. <META name="keywords" content="İnönü Üniversitesi, Fakülteler, Yüksekokullar, Enstitüler, Akademik Takvim, Üniversite, InonuUniversity, Turkey, University, education, campus, Türkiye, academics, students, faculty, masters, graduate schools, sports, class, study, Library, Computer Center, bilgi işlem merkezi, bölümler, bilim, araştırma"> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Başlık Etiketleri <html> <head> <title>Başlık Etiketleri</title> </head> <body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> </body> </html> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Paragraf Etiketleri <center>....</center> Sayfanın ortasında görünür. <p> Paragraf yada satır başı yapmak için kullanılır. Sola dayalı olması için: <p align=left>………</p> Ortada olması için: <p align=center>………</p> Sağa dayalı olması için: <p align=right>………</p> Satırbaşı veya paragraf yapmak için: <br> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Paragraf Etiketleri <html> <head> <title>İlk Sayfam</title> </head> <body> <p align=left>Yazıyı sola dayalı yaz</p> <p align=center>Yazıyı ortalayarak yaz</p> <p align=right>Yazıyı sağa dayalı yaz</p> <br> </body> </html> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Font Etiketleri Metinlerin kalın, italik ve alt çizgili olması için; Kalın için <b>Kalın Yazı</b> İtalik için <i>İtalik Yazı </i> Alt çizgi için <u>Altı Çizgili Yazı</u> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Font Etiketleri <font face="…." size="…." color="….">yazı</font> face: Yazı tipinin adı (arial, tahoma, verdana, ...). size: Yazının büyüklüğü (1-7 arası). color: Yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri). Bunlara font etiketinin parametreleri denir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Font Etiketleri <html> <head> <title>Mevsimler</title> </head> <body> <font face="verdana" size="7" color="#008000">İlkbahar</font><br> <font face="Monotype Corsiva" size="6" color="#ff0000">Yaz</font><br> <font face="Arial" size="5" color="Fuchsia">Sonbahar</font><br> <font face="comic sans ms" size="4" color="#0000ff">Kış</font><br> </body> </html> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Font Etiketleri Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
<img src="resmin bulunduğu yer ve adı" width="x" height="y"> Resim Etiketleri Yapılması gereken şey, browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibarettir. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtilmesi uygundur. Kullanılan etiket şu şekilde olmalıdır; <img src="resmin bulunduğu yer ve adı" width="x" height="y"> Burada x resmin enini y ise boyunu belirtmektedir. Bu bilgilere, resmi herhangi bir grafik editörüyle açarak ulaşılabilir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
<img src="../resim/devkan.gif" width="65" height="91"> Resim Etiketleri Dikkat edilmesi gereken en önemli özellik resmi açacak olan browser'ın o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul etmesidir. Dosyanın yeri ona göre belirlenmelidir. Üst dizine çıkmak için ../ ifadesi kullanılır. <img src="../resim/devkan.gif" width="65" height="91"> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Resim Etiketleri Resimleri hizalamak için align komutu kullanılır. Resmi sağa (right), ortaya (center) ya da sola (left) alabilmek için parametreleri yazılır. <img src="devkan.gif" width="65" height="91" align="right"> <img src="devkan.gif" width="65" height="91" align="left"> <img src="devkan.gif" width="65" height="91" align="center"> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
<font color="red"> <font color="#FF0000"> Renk Kodları Fontlar konusunda, metnin rengini belirlerken <font color="..."> etiketini kullanılır ve color komutunun karşısına rengin ingilizce karşılığını yazılır. Etikette kullanılan color="#xxxxxx" ifadesi ise, RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden her birinin alacağı değer 00 ile FF aralığında olabilir. <font color="red"> <font color="#FF0000"> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Renk Kodları Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz. #000000=black(siyah) #000080=navy(lacivert) #0000FF=blue(mavi) #008000=green(yeşil) #00FFFF=aqua(turkuaz) #800000=maroon(vişne çürüğü) #808080=gray(gri) #FF0000=red(kırmızı) #FF00FF=fuchsia(parlak pembe) #FFFF00=yellow(sarı) #FFFFFF=white(beyaz) Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Arka Plan Renkleri Yalnızca metinler değil aynı zamanda sayfanın arka planı da renklendirilebilir. Bunun için <body bgcolor="#xxxxxx"> etiketi kullanılır. Daha doğrusu sayfanın gövdesini belirtmek için yazılan <body> etiketini, <body bgcolor=“#ffffff"> şeklinde değiştirtmesi gerekir. Aynı zamanda <body background="zemin.gif"> ifadesi eklenmesi ile istenilen herhangi bir resim arka plan olarak kullanılabilir. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
<a href="hakkimda.html">Hakkımda</a> Bağlantı Etiketleri HTML'de en önemli unsurlardan birisi bağlantılardır. Bağlantılar sayesinde hazırlanılan sayfalar birbirleriyle ilişkili hale getirilir. HTML'de metin, resim, ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri yada bunların hepsine bağlantı kazandırmak mümkündür. <a href="hakkimda.html">Hakkımda</a> Yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. <a href="hakkimda.html" style="text-decoration: none;" > Hakkımda </a> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Bağlantı Etiketleri <a href="meyve.gif"> Meyve resmi açın </a> <a href=“muzik.zip"> Müzik dosyalarını indirin</a> <a href="sayfa2.htm"> 2. sayfaya git </a> <a href="http://www.inonu.edu.tr"> İnönü Üniversitesi</a> <a href="ftp://ftp.inonu.edu.tr/"> Dosyaları indirin </a> <a href="mailto: devkan@inonu.edu.tr"> Mail için </a> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Bağlantı Etiketleri Resimlere bağlantı vermek için resmi yerleştirmekte kullanılan <img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına yazmak gerekir. <a href="sayfa1.htm"><img src="resim.gif" border="0"></a> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Etiket Parametreleri Bağlantının açılacağı pencereyi belirtmek için etiket (target) parametresi kullanılır. <a href= "http://www.inonu.edu.tr" target= "blank"> İnönü Üniversitesi</a> target="blank " Bağlantı yeni bir pencerede açılır. target="self " Bağlantı aynı pencere içerisinde açılır. target="top" Bağlantı aynı pencere içerisinde en üstte açılır. target="parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Liste Etiketleri Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini getiriyoruz. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Paragraf Etiketleri <ol type="1" start="3"> <li>Kimya <ol type="a" > <li>İnorganik <li>Analitik </ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral </ol> </ol> </ol> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Paragraf Etiketleri <body bgcolor="#ffcc00"> <font type="verdana" size="4" color="#ffffff"> <ol><h2><u>Günler</u></h2> <font color="#0000ff"> <li>Pazartesi <li>Salı <li>Çarşamba <li>Perşembe <li>Cuma </font> <font color="ff0000"> <li>Cumartesi <li>Pazar </font> </ol> </font> </body> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablolar Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istenilen yerde durmasını sağlamak amaçlarıyla kullanabilen HTML'nin en önemli yapıtaşlarındandır. Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablolar Basit bir tablo yapmak için öncelikle <table>...</table> etiketlerini arası doldurulur. <tr> etiketi ile satırlar, <td> etiketi ile sütunları oluşturulur. <table border="1"> <tr> <td>hücre</td> </tr> </table> <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablolar Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci <table border="1"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table> <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablo Parametreleri width ve height parametreleri tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz. <table border="1" width="150" height="200"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablo Parametreleri <table border="1"> <tr> <td>İlk satır, sütun 1</td> <td>İlk satır, sütun 2</td> </tr> <td colspan="2"> İkinci satır <i>birleştirilmiş</i> sütunlar </td> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablo Parametreleri <table border="1" cellpadding="12"> <tr> <td colspan="2">A</td> <td>C</td> <td>D</td> </tr> <td colspan="3">E</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablo Parametreleri <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> şeklinde kullanılır. bgcolor parametresi hücreyi renklendirmede kullanılır. <table bgcolor="green" <td>Hücre İçi Renkli Tablo</td> </table> <table bgcolor="blue" Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci
Tablo Parametreleri <table style="width: 11%; height: 90px" > <tr> <td bg bgcolor="blue">hücre1</td> </tr> <td bg bgcolor="green">hücre2</td> <td bg bgcolor="red">hücre3</td> <td bg bgcolor="yellow">hücre4</td> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci