HTML’ye GİRİŞ Dr. Devkan Kaleci

HTML’yeGİ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, “HyperTextMarkupLanguage” 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’deTAGLAR (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ş • 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, graduateschools, sports, class, study, Library, ComputerCenter, 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="MonotypeCorsiva" size="6" color="#ff0000">Yaz</font><br> <font face="Arial" size="5" color="Fuchsia">Sonbahar</font><br> <font face="comicsansms" 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

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; <imgsrc="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

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. <imgsrc="../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. <imgsrc="devkan.gif" width="65" height="91" align="right"> <imgsrc="devkan.gif" width="65" height="91" align="left"> <imgsrc="devkan.gif" width="65" height="91" align="center"> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

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ılancolor="#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

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 <imgsrc="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına yazmak gerekir. <a href="sayfa1.htm"><imgsrc="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> (listitem) 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 ilesatırlar, <td> etiketi ilesütunları oluşturulur. <tableborder="1"> <tr> <td>hücre</td> </tr> </table> <tableborder="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

Tablolar <tableborder="1"><tr> <td>hücre1</td></tr><tr> <td>hücre2</td> </tr> </table> <tableborder="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table> 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. <tableborder="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>İlksatır, sütun 1</td> <td>İlksatır, sütun 2</td> </tr> <tr> <td colspan="2"> İkincisatır<i>birleştirilmiş</i> sütunlar </td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

Tablo Parametreleri <tableborder="1" cellpadding="12"> <tr> <tdcolspan="2">A</td> <td>C</td> <td>D</td> </tr> <tr> <tdcolspan="3">E</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

Tablo Parametreleri • <tdbgcolor="..." background="..." width="..." height="..." align="..." valign="..."> şeklinde kullanılır. • bgcolor parametresi hücreyi renklendirmede kullanılır. <tablebgcolor="green" <td>Hücre İçi Renkli Tablo</td> </table> <tablebgcolor="blue" <td>Hücre İçi Renkli Tablo</td> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

Tablo Parametreleri <tablestyle="width: 11%; height: 90px" > <tr> <tdbgbgcolor="blue">hücre1</td> </tr> <tr> <tdbgbgcolor="green">hücre2</td> </tr> <tr> <tdbgbgcolor="red">hücre3</td> </tr> <tr> <tdbgbgcolor="yellow">hücre4</td> </tr> </table> Temel Bilgisayar Terimleri – Yrd. Doç. Dr. Devkan Kaleci

HTML’ye GİRİŞ Dr. Devkan Kaleci