BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 2. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA

Transkript

1 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 2. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA

2 HTML NEDİR? HTML (Hyper Text Markup Language / Köprü Metni (Hareketli Metin) İşaretleme Dili) Web sayfası hazırlama dilidir. HTML, metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisidir. HTML bir programlama dili değil, bir mark-up (~işaretleme) dilidir, yani etiket (tag) denilen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar. Örneğin herhangi bir etiket (tag) olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına <I> ve </I> işaretleri gelince bu şekilde italik görülür. Bu dilde binary veya hexadecimal kodlar yoktur. Herşey metin tabanlıdır. HTML belgesi oluşturmak için ihtiyacınız olan şey bir editördür. Hatta herhangi bir HTML editörü bulunmuyorsa Notepad gibi basit bir metin editörü de işe yarayacaktır. Hatta çok iyi bir şekilde HTML öğrenmek için başlangıçta basit bir metin editörü ile çalışılması kuvvetle önerilir. Dosya uzantısı.html veya.htm olmalıdır.

3 HTML DERSLERİ GENEL BİLGİ HTML Sürümleri HTML in birkaç sürümü vardır. Günümüzde çoğu Web Tarayıcısının desteklediği standart sürüm, 3.2 sürümüdür. En çok kullanılan HTML sürümü ise 4.1 dir. HTML standartları World Wide Web Consortium (W3C) tarafından kontrol edilmektedir. HTML 1.0 : Bu sürüm, daha sonra geliştirilen sürümlerle karşılaştırılınca çok kısıtlı yeteneklere sahiptir. Bu nedenle HTML 1.0 da yaratılan belgeler oldukça basittir, temel özellikleri şöyle özetlenebilir; Çok seviyeli başlıklar; Köprü metni referansları; Paragraflar; Maddelenmiş listeler için özel formatlama HTML 2.0 : Bu sürüm, 1994 yılından önce Web belgelerinde kullanılan eklentiler ve özellikler temel alınarak hazırlanmıştır. Temel yenilikleri; Satır içi görüntüler ve doldurulabilen formlardır. HTML 3.0 : Bu sürümün sağladığı temel özellikler; Sayfa görünümü üzerinde ileri derecede kontrol; Manşetler; Görüntülerdeki popüler noktaların istemci tarafına işlenmesi; Özelleştirilmiş Listeler; İstemci çekme/sunucu itme özellikli dinamik belgeler; Stil yaprakları; Form içi tablolar

4 HTML DERSLERİ GENEL BİLGİ HTML 4.0 : Bu sürümde iki yeni eklenti vardır. Bu eklentilerin en önemlileri; Cascading Style Sheets (CSS) Dynamic HTML (DHTML) Cascading Style Sheets (CSS) CSS in her yerde kullanılması nedeni ile W3C, CSS in Internet Explorer ve Netscape Navigator tarafından desteklenen standardını belirlemiştir. CSS, Microsoft Wordün stili gibi çalışır. Stil önceden tanımlanır. Daha sonrada sayfadaki elemanlarda stile başvuru yapılır. CSS ile madde imleri, metin fontları, kullanılan başlık fontu vs. değiştirilebilinir. Dynamic HTML (DHTML) Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket etmesini ya da görünümünün değişmesini sağlayabilen Web sayfaları yapabilme imkanı sağlayan dildir.

5 HTML DERSLERİ GENEL BİLGİ HTML 5.0 (H5) : Bu sürüm, Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir. Henüz deneme aşamasında olmasına rağmen çok iyi şekilde çalışmaktadır. Günümüzde çoğunlukla kullanılan 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu ihtiyaçları karşılamak için H5 geliştirmeye başlanmıştır Video paylaşım sitesi, Youtube, deneme aşamasında H5 i kullanıcılara sunmaktadır.

6 HTML DERSLERİ GENEL BİLGİ HTML Eklentileri (Extensions) Son birkaç yılda bazı satıcılar web modelini dinamik ve etkileşimli (interaktif) içerikli olarak geliştirdiler. Bunlar; Client-Side Extensions (İstemci Tarafı Eklentileri) Server-Side Extensions (Sunucu Tarafı Eklentileri) Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dinamik HTML İstemci Tarafına birer örnektir. CGI (Common Gateway Interface) programları ve scriptler, Active Server Page (ASP), Hypertext Preprocessor (PHP), Java Server Page (JSP) ve Perl de Sunucu tarafına birer örnektir. XML: extensible Markup Language (Esnetilebilir İşaretleme Dili) XML Internet teki en yeni dillerdendir. W3C, XML i Verilerde yapı belirtmek için ortak bir yazım şekli olarak ifade eder. Bu bağlamda XML pek de dil sayılmaz. HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized Markup Language (SGML) den türer. XML in HTML den farkı HTML sabit etiketlere sahiptir fakat XML, SGML gibi kendi etiketlerinizi tanımlamanıza izin verir.

7 HTML DERSLERİ GENEL BİLGİ XHTML: extensible Hyper Text Markup Language XHTML, 2000 yılında W3C tarafından kabul edilmiş tüm internet tarayıcıları ve GSM telefonları tarafından standart olarak kabul edilmiştir. HTML, biraz daha derlenip geliştirilmiş ve belirli bir standarta geçirilip XHTML oluşturulmuştur. XHTML kullanmanın en temel amaçlarından biri, farklı tarayıcılarda sorun çıkartmamasıdır. Bunun yanı sıra tarayıcılar kodu daha çabuk algılar ve web sayfası HTML e göre daha hızlı çalışır. Bir diğer avantajı da başta Google olmak üzere başlıca arama motorları XHTML standartlarına uygun yazılmış siteye tam not verir ve arama motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir. XHTML, Extensible Hyper Text Markup Language, Türkçe karşılığı Esnetilebilir Köprü Metni İşaretleme Dili anlamındadır. Her ne kadar esnetilebilir denilse de bu esneklik kodlayan programcılar için değil, XHTML i geliştiren programcılar için geçerlidir. XML de var olan sıkı ve uyulması gereken şartlar XHTML de de geçerlidir. HTML de etiketlerin (tag) yazımında büyük ya da küçük duyarlılığı yoktur, ancak XHTML de etiketler (tag) küçük harflerle yazılmalıdır. Bunun dışında da yazım kurallarında ufak farklılıklar vardır.

8 HTML DERSLERİ GENEL BİLGİ World Wide Web World Wide Web (ya da kısaca Web) birbirleri ile iletişim kuran iki bileşenden meydana gelir. Bunlar; 1. Web Tarayıcısı (Web Browser) (Client: İstemci) 2. Web Sunucusu (Web Server) (Server: Sunucu) Detaylı bilgi için EKBILGI.pdf isimli notu okumanız önerilmektedir. Web Nasıl Çalışır 1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink e tıklar. 2. Tarayıcı, DNS (Domain Name Server) a bağlanıp istemde bulunduğu sayfanın server IP sini alır. 3. Ardından aldığı IP ye bir çağrı gönderir ve sayfayı ister. 4. Web Sunucusu da bu isteğe cevap verir ve http üzerinden sayfayı Web tarayıcısına gönderir.

9 HTML DERSLERİ GENEL BİLGİ HTTP ve HTML HTTP, Web sunucusu ile Web tarayıcısının birbirleri ile haberleştiği bir protokoldür. Bilgisayarlar arasındaki ortak iletişim diline protokol denir. HTML belgeleri, metin ve etiketlerden meydana gelir. HTML etiketleri açılı parantez içerisinde yazılır. HTML etiketlerinin çoğu slash (/) karakteri ile biten iki taraflı etiket ile kapatılarak bloklar halinde kullanılır. Örnek: <B>HTML</B> bir metin işaretleme dilidir. Yukarıdaki örnekte HTML koyu olarak yazılacaktır. Tek taraflı etiketler de vardır. Yani kapama etiketi içermezler ve bağımsız değişken alırlar. Bağımsız değişken (argument), etiketin içindeki etiketin nasıl davranması gerektiği hakkında bilgi içeren metine denir. Örneğin <img> etiketi için kaynak belirtmek gereklidir, bu bağımsız değişkende ingilizce kaynak kelimesinin kısaltması src dir. Örnek: <img src = kitap.gif >

10 HTML DERSLERİ GENEL BİLGİ HTTP ve HTML HTTP, Web sunucusu ile Web tarayıcısının birbirleri ile haberleştiği bir protokoldür. Bilgisayarlar arasındaki ortak iletişim diline protokol denir. HTML belgeleri, metin ve etiketlerden meydana gelir. Örnek: <B>HTML</B> bir metin işaretleme dilidir. Yukarıdaki örnekte HTML koyu olarak yazılacaktır. Tek taraflı etiketler de vardır. Yani kapama etiketi içermezler ve bağımsız değişken alırlar. Bağımsız değişken (argument), etiketin içindeki etiketin nasıl davranması gerektiği hakkında bilgi içeren metine denir. Örneğin <img> etiketi için kaynak belirtmek gereklidir, bu bağımsız değişkende ingilizce kaynak kelimesinin kısaltması src dir. Örnek: <img src = kitap.gif >

11 HTML DERSLERİ GENEL BİLGİ Web Hazırlama Yazılımları Web hazırlamak için birçok araca sahibiz. Bunları üç sınıfta toplayabiliriz. HTML editörleri Web Sitesi geliştirme araçları Web Uygulaması geliştirme araçları HTML Editörleri HTML yazmak için NotePad i kullanabileceğimiz gibi yardımcı programlar da vardır. Bunlardan bir kısmı; Hot Dog HotMetal Pro HomeSite 1st Page 2000 Basit bir metin editörü. Web Sitesi Geliştirme Araçları Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte linkleri kontrol edebilen araçlar ve Web Sitesini Web Serverda yayınlayabilecek araçlar içerir. WYSIWYG (What You See Is What You Get /Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörlerdir. Fusion Visual Page Dreamweaver FrontPage 2003 FrontPage 2007 (SharePointDesigner 2007) Web Uygulamaları Geliştirme Araçları Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır. Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları; ColdFusion NetDynamics Dreamweaver UtraDev Visual InterDev

12 HTML DERSLERİ GENEL BİLGİ KLASÖR VE DOSYA İSİMLERİNDE 1) Türkçe karakter kullanmamaya (ç,ğ,ö,ü,i,ı,ş yerine c,g,o,u,i,s kullanılacak) 2) Büyük harf kullanmamaya 3) 8 harfi geçmemesine (daha iyi olur) 4) İlk giriş sayfasının adının index.html (ya da index.htm) olmasına DİKKAT EDİNİZ!!!!!!!!!!

13 HTML DERSLERİ GENEL BİLGİ Sorular 1. Internet hangi protokol üzerine kurulmuştur? 2. (Doğru/Yanlış): HTML, Web sayfası hazırlamak için kullanılan bir programlama dilidir. 3. World Wide Web den bir Web sayfası talep gerçekleşen olaylar nelerdir? 4. HTML ve http asındaki fark nedir?

14 HTML DERSLERİ GENEL BİLGİ-OKUMA Kavramlar - Özet Internet, Uluslararası arası ağ (International Network) demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir. Internet, binlerce omurgalar arası bağ, on binlerce hizmet sağlayıcısından oluşan bir sistemle milyonlarca kişiye hizmet sunuyor. İki veya daha fazla bilgisayarın kendi arasında iletişim kurabilmesi için öncelikle bu bilgisayarları ortak bir dil konuşur hale getirmek zorundayız. Bilgisayarlar arasındaki ortak iletişim diline protokol denir. Internet in ortak dili TCP/IP protokol kümesidir. İnternete bağlı bir bilgisayarın web sitelerinde gezinti yapabilmesi için kullanılan programlara web browser denilir. yaygın olarak kullanılan web browserlar: İnternet Explorer, Mozilla FireFox, Google Chrome, Opera gibi. Internet' de her sayfanın bir adresi vardır. Web adresleri, ulaşmak istediğiniz bilginin hangi sunucu üzerinde bulunduğunu gösterir. Yani sayfanın web de tam olarak nerede depolandığını gösterir.

15 HTML DERSLERİ GENEL BİLGİ-OKUMA Kavramlar - Özet Web adreslerinde sitenin adı ve sitenin hangi tür kuruma ait olduğunu gösteren kısım değişir. Bazı sitelerin sonun da ülke kısaltmaları vardır. Com : Ticari kuruluşlar Org : Ticari olmayan kuruluşlar Edu : Üniversiteler Gov : Devlete ait kurumlar Mil : Askeri kurumlar Net : İnternetle ilgili kurumlar Internet üzerinde verilerin aktarılması için ortak bir protokole ihtiyaç vardır. Bu protokol HTTP ve TCP/IP dir. Bir web sayfasının ziyaretçinin ekranına kadar kat ettiği yolda çeşitli protokoller (kurallar) vardır. Bunların başında bir bilgisayar ağı olan Internet in ulaştırma kuralları HTTP (HyperText Transfer Protocol Hareketli Metin Aktarma Kuralları) geliyor.

16 HTML DERSLERİ GENEL BİLGİ-OKUMA Kavramlar - Özet Web sayfalarını içeren bilgisayar, Web ilişkisinde Server (Sunucu) olarak adlandırılır. Ziyaretçinin bilgisayarı ise Client (İstemci) olarak adlandırlır. Sunucu bilgisayarlarla, istemci bilgisayarlar arasındaki ilişkiyi (Server- Client ilişkisi) düzenleyen kurallara TCP/IP (Transmission Control Protocol / Internet Protocol Aktarma Denetim Kuralları / Internet Kuralları) adı verilir. Internet kurallarının IP bölümü, iki bilgisayar arasındaki bağlantının doğru kanallardan kurulmasını, kesildiğinde yeniden kurulmasını sağlar. TCP bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru anlaşılmasını sağlar. Internet te aranan kaynak URL (Universal Resource Locator Evrensel Kaynak Yolu Belirleyici) denilen adres sistemini kullanarak bulunur.

17 HTML E GİRİŞ Web Sayfasının Genel Yapısı Etiketler Parametreler <HEAD> Etiketi (TITLE ve META etiketleri ile kullanımı)

18 HTML DERSLERİ 1 Bir Web Sayfasının Genel Yapısı <HTML> <HEAD> Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları, başlık, JavaScript tanımlamaları vb elemanlar bulunur... </HEAD> <BODY> Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb içerebilir... </BODY> </HTML> Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani yazmasak ta olur. <! doctype html public -//W3C//DTD HTML 4.0 Transdional//EN > Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <body> etiketleri arasında bir fark yoktur.

19 HTML DERSLERİ 1 Yapısal Etiketler (Structural Tags) Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar; 1 Örnek: 001_myfirst.htm

20 HTML Etiketleri (Tag) HTML DERSLERİ GENEL BİLGİ HTML etiketleri, HTML öğelerini belirtmek için kullanılır. HTML etiketleri grup parantezleri < > (angle brackets ) içine yazılır. HTML etiketleri çift olarak kullanılır, çoğu slash (/) karakteri ile biten iki taraflı etiket ile kapatılarak bloklar halinde kullanılır. Örnek: <b> Bu metin koyu fonttadır. </b> Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir. Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir. HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.)!!! HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söyledik: <B> ve <b> aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun büyük harflerle yapılmış olduğunu göreceksiniz. Fakat editörde yazarken küçük harf kullanırız. Neden? Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.

21 HTML DERSLERİ 1 Parametrelerin değerleri her zaman tırnak içerisinde olmalıdır. Değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine alabilirsiniz: name='cem "GORA" Yilmaz' 1

22 HTML DERSLERİ 1 Parametre Örneği 1: <h1> başlık belirtir. (Daha sonra detaylarıyla göreceğiz) <h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir. Ortaya hizalanmış metin <html> <body> <h1 align="center">bu başlık 1</h1> 1 <p>yukarıdaki başlık ortalanmıştır. Yukarıdaki başlık ortalanmıştır. Yukarıdaki başlık ortalanmıştır. Yukarıdaki başlık ortalanmıştır. Yukarıdaki başlık ortalanmıştır. </p> </body> </html>

23 HTML DERSLERİ 1 1

24 HTML DERSLERİ 1 <META> Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan arama motorları sayfaların meta TAG ına bakarak gruplandırma yaparlar. Arama motorlarının bot programları sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler. Bununla ilgili aşağıdaki örnekleri inceleyebiliriz. <META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler"> <META NAME="Keywords" CONTENT="html, 1 htm, web sayfası"> <META NAME="Author" CONTENT= Mehtap Yalçınkaya"> Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> (Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso , Latin 5' dir. Windows-1254 de Türkçe dil desteği sağlamaktadır) Bazen <meta name="security" content="low"> gibi bilinmeyen parametreler görebilirsiniz.

25 HTML DERSLERİ 1 Meta Örneği 1: Doküman keywords <html> <head> <meta name="description" content="html examples"> <meta name="keywords"content="html, DHTML, CSS, XML, XHTML, JavaScript, 1 VBScript"> <META NAME="Author" CONTENT="Mehtap Yalçınkaya"> <Meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso "> </head> <body> <p> Bu dökümanın meta özellikleri ona ait keyword'ları, açıklaması ve yazarıdır. </p> </body> </html>

26 HTML DERSLERİ 1 Meta Örneği 2: Doküman tanımlaması-farklı <html> <head> <meta name="hazirlayan" content="bill Gates"> <meta name="duzenleme" content="levin Mitnick,06/10/08"> <meta name="generator " content="microsoft 1 FrontPage 2007"> <meta http-equıv="content-type" content="text/html; charset=windows-1254"> </head> <body> <p> Bu dökümanın meta bilgileri, siteyi hazırlayan ve kullandığı arayüz hakkında bilgi veriyor. </p> </body> </html>

27 HTML DERSLERİ 1 Meta Örneği 3: Kullanıcıyı yönlendirme <html> <head> <meta http-equiv="refresh" content="5;url= </head> <body> <p> Üzgünüz! Taşındık! Yeni adresimiz: <a href=" </p> <p> Bir kaç saniye içerisinde yeni adresimize yönlendirileceksiniz. </p> <p> Eğer bu mesajı 5 saniyeden fazla görürseniz yukarıdaki link'e tıklayınız! </p> </body> </html> 1