Bu bölümde HTML dilinin temelleri öğrenilecektir. Bir HTML sayfasını oluşturan temel dil öğelerine değinilecektir.

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "Bu bölümde HTML dilinin temelleri öğrenilecektir. Bir HTML sayfasını oluşturan temel dil öğelerine değinilecektir."

Transkript

1 HTML Giriş Bölüm 1. HTML Temelleri Giriş Bu bölümde HTML dilinin temelleri öğrenilecektir. Bir HTML sayfasını oluşturan temel dil öğelerine değinilecektir. HTML nedir? Birçok masaüstü uygulaması dosya okuyup yazmak için özel biçimler. Örneğin Microsoft Word.doc dosyalarını anlar. Bu dosyalar, içeriklerinin yanı sıra dosya bir sonraki defa açıldığında içeriğinin nasıl görüntüleneceğini belirten bir takım komutlar da içerir. Aynı zamanda dosya hakkında genel bilgiler (yazar vb.) veren üst verilere (metadata) sahiptir. HTML (Hypertext Markup Language / Hipertext İşaretleme Dili), web dökümanlarının içeriğini açıklamak için kullanılan bir işaretleme dilidir. Elemean adı verilen işaretçiler içeren özel bir söz dizimine sahiptir. Bu elemanlar web sayfasındaki içeriğin etrafını sararak bu içeriğin web tarayıcılar ve diğer yardımcı uygulamalarda nasıl yorumlanacağını belirtirler. HTML Dilinin genel görüntüsü HTML, bir içeriğin basit-düz metinsel temsili ve genel anlamıdır. Örneğin: <p id="example">this is a paragraph.</p> Buradaki <p>, bir işarettir ve buna etiket adı verilir. Bu işaret devam eden içeriğin bir paragraf olduğunu belirtir. Bu işaret etkilediği içeriğin başında bulunduğundan ötürü buna başlangıç etiketi adı verilir. İçeriğin sonundaki </p> işaretine ise, bitiş etiketi adı verilir ve paragrafın bitişini belirtir. Buradaki örnekteki başlangıç etiketi, bitiş etiketi ve bunların içerisindeki herşeye eleman adı verilir. Bu eleman içerisinde yer alan id="example" ise bir özelliktir. Elemanın sahip olacağı özellikler burada görüldüğü özellik adı ve değeri ile birlikte ard arda yazılır. Birçok web tarayıcıda, Kaynak ya da Kaynağı Görüntüle gibi seçenekler mevcuttur. Bu seçenekler yardımıyla gezindiğiniz web sayfalarının kaynaklarını görüntüleyebilirsiniz. Bunu yapmayı deneyin ve web sayfaları hakkında daha detaylı bilgi edinmeye gayret edin.

2 HTML tarihi Bu konuya daha önceki dökümanlarda değinilmişti. Burada kronolojik bir şekilde HTML tarihini verelim. WWW, Tim Berners-Lee önderliğinde ortaya atılmıştır de IETF (Internet Engineering Task Force) HTML standardı ortaya atımış ancak başarılı olmamıştır de HTML 2.0 yayınlandı de HTML 4.0 yayınlandı da HTML 4.01 yayınlandı de XHTML 1.0 yayınlandı de HTML 5 çalışması başladı. Bir HTML dökümanının yapısı Aşağıda, örnek bir HTML dökümanının yapısını görüyorsunuz. <!DOCTYPE html> <html> <head> <title>example page</title> </head> <body> <h1>hello world</h1> </body> </html> Şimdi bunu gerçekleştirelim ve nasıl yapıldığını öğrenelim. Bu metni, bilgisayarımızda bir metin editörü programında yazın ve.html uzantısı ile kaydedin. Kaydettiğiniz dosyayı web tarayıcınız ile açın. Bunu gerçekleştirdiğinizde aşağıdaki şekilde bir web sayfanısının tarayıcı ekranında görüntülendiğini göreceksiniz.

3 Döküman, <!DOCTYPE html> işareti ile başlar. DOCTYPE, döküman tipi bildirimidir ve web tarayıcının dökümanı nasıl yorumlayacağına karar vermesine yardımcı olur. Bizim örneğimizde web tarayıcısına standart modu nda dökümanı yorumlaması gerektiğini söylüyoruz. Bu tür bir giriş dökümanın HTML5 dökümanı olduğunu gösterir. Bundan sonra, html elemanının açılış etiketi olan <html> işaretini görmektesiniz. Bu, tüm dökümanı kapsayan bir yapıdır. html elemanının kapanış etiketi olan </html> dokümanın sonlandığını belirtir. html elemanı içerisinde, head elemanı mevcuttur. Bu eleman ise, döküman hakkında bilgi verilen bölümü kapsar. Bu elamanın içerisinde title elemanı mevcuttur. Bu eleman, sayfanın başlığının ne olduğunu belirtir. head elemanından sonra body elemanı mevcuttur. Bu eleman, sayfa içeriğinizi kapsayan elemandır. Genellikle bu eleman içerisinde çalışacaksınız. Bu elemanın içerisinde ise h1 elemanını görmektesiniz. Bu eleman ise, içerisinde bulunan metnin başlık şeklinde yorumlanacağını belirtir. Sayfalarınızda, article, header, div vb. yapısal elemanlarla, içeriğin genel yapısı belirlenir. Bunlar içerisinde ise, başlıklar, paragraflar, listeler vb. elemanlar kullanarak, içeriğin özel durumları belirtilir. HTML elemanlarının söz dizimi

4 Basit bir HTML elemanı, bir içeriğin çevresindeki iki işaretçiden oluşur. Elemanların özellikleri başlık etiketi içerisinde belirtilir. Aşağıdaki örneğe bir gözatalım: <header> <h1>the Basics of <abbr title="hypertext Markup Language">HTML</abbr> </h1> </header> Bunun, sayfanın görüntüsü aşağıdaki şekildedir. Bu örnekte, h1 elemanı içerisinde abbr elemanı kullanılmıştır. abbr elemanının title (başlık) özelliğine, eleman içerisindeki metin üzerine gelindiğinde gösterilmesi gereken başlık bilgisi değer olarak girilmiştir. Buradan da görüldüğü üzere bir elemanın özellikleri, özellik-değer çifti ile belirlenir. Eleman özelliklerinin değerlerinde yine tırnak işareti kullanmanız iyi olacaktır. Yani XHTML söz dizimi kullanmanız, standartlara uymanızı kolaylaştıracak ve daha rahat kod yazmanızı sağlayacak ve kodunuzun okunurluğunu artıracaktır. XHTML mecburi değildir ancak bunu kullanmaya alışırsanız ileride çok rahat edebilirsiniz. Bu tür özellikler ve değerleri HTML spesifikasyonları ( attributes.html) ile belirlenmiştir. Yine html hakkında ayrıntılı bilgiyi ve kullanım bilgilerini w3schools ( adresinden öğrenebilirsiniz. Bu adresten tüm html ve css spesifikasyonlarına erişebilirsiniz. Bir elemanın içerisindeki başka bir eleman, o elemanın çocuğu olarak adlandırılır. Yukarıdaki örnekte abbr elemanı, h1 elemanının çocuğu; h1 elemanı da header elemanının çocuğudur. Bunun tam tersi olarak header elemanına da h1 elemanının ebeveyn i denir. Blok seviyesi ve satır içi (inline) elemanlar

5 HTML de blok seviyesi, bir içeriğin genel yapısını göstermek için kullanılır. Satır içi elemanlar ise, blok seviyesindeki elemanlar içerisinde yer alan kısımları ifade eder. Bütün bu elemanlar, dökümanın içeriğinin gruplandırılması için kullanılır. HTML5 de bu blok yapıları daha da detaylandırılımıştır. Bu bağlantıdan, bu kategorilere erişebilirsiniz. Karakter referansları HTML dökümanlarında özel karakterler nasıl ifade edilir? HTML dilinde, <, > ve & karakterleri özel karakterlerdir. Dolayısıyla bu karakterleri html dökümanı içerisine yazarsanız bunlar oldukları gibi kullanıcıya gösterilmek yerine, yorumlanarak sonuçları gösterilir. Örneğin, HTML kodunun içerisinde stones&pounds, diye bir yazı yazarsak, bu kullanıcıya yazdığımız şekilde değil stones s şeklinde gösterilir. Bunun sebebi şudur: ifadesi HTML de, özel bir karakter kodudur. Bu kod yorumlanarak şeklinde gösterilir. Eğer &, <, ve > karakterlerini göstermek istiyorsak bunların da özel kodlarını yazmamız gerek. Örneğin & işaretini göstermek için, & ifadesi kullanabilirsiniz. Bu karakterlerin bir listesini w3schools sitesinin özel karakterler bölümünde bulabilirsiniz. Not: Bu materyalin orijinali Mark Norman Francis tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 12: The basics of HTML adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak The basics of HTML adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

6 HTML Giriş Bölüm 2. Döküman tipleri ve işaretleme stilleri Giriş DOCTYPE, html etiketinin hemen üzerinde yer alır ve bütün dökümanlarınızda bulunur. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>my fabulous document</title> DOCTYPE, bir HTML dökümanının tipini belirler ve nasıl doğrulanacağını ve gerçekleneceğini bildirir. Standart mod, quirks mod DOCTYPE, aynı zamanda, web tarayıcının sayfayı, standart mod da yorumlayacağını gösterir. Bu modda web tarayıcılar, HTML ve CSS standartlarına göre sayfayı gerçekler. Öte yandan eğer DOCTYPE bildirimi yok ise, bu quirks mod anlamına gelir ve bu modda, tarayıcılar dökümanın eski olduğunu ve web standartları ile çok uyuşmayabileceğine karar verirler. Buna uygun olarak mümkün olduğunca doğru bir şekilde sayfalar gerçeklenmeye çalışılır. Sayfanın standartlara uyumlu olup olmadığına dikkat edilmez. HTML5 doküman tipi ve diğerleri Bu derste biz, HTML5 doctype kullanacağız: <!DOCTYPE html>

7 Bu döküman tipini kullanmanın herhangi bir dezavantajı yoktur. Aksine, hatırlanması kolaydır ve birçok HTML 4 / XHTML 1.0 özelliğini de barındırdığı için doğrulanmasında bir problem çıkmayacaktır. Öte yandan, bazı projelerde karşınıza çıkabilecek farklı doküman tipleri de mevcuttur. Bunları biraz inceleyelim. HTML 4.01 katı doküman tipi <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " strict.dtd"> Bu doküman tipi, HTML 4.01 spesifikasyonuna göre doğrulanır. Yürürlükten kaldırılmış olan ve sunuma yönelik olan işaretlerin (örn. <font> elamanları) kullanımına izin vermez. Gevşek HTML stil işaretlerine (örn. tırnak içine alınmamış özellik değerleri -required- vb.) izin verir. HTML 4.01 geçiş doküman tipi <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Bazı sunum amaçlı ve yürürlükten kaldırılmış olan elamanların (örn. <font> elemanı vb.) kullanımına izin verir. frameset vb. elemanların kullanımına izin vermez. Gevşek HTML stilindeki işaretlere izin verir. XHTML 1.0 katı ve geçiş doküman tipi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Bunlar HTML 4.01 doküman tipinin tam olarak XHTML 1.0 karşılıklarıdır. Fonksiyonel olarak daha öncekilerle aynıdır. Gevşek HTML stilindeki işaretleri kabul etmez. Doküman, iyi biçimlendirilmiş XML olmak zorundadır. HTML 4.01 ve XHTML 1.0 framset doküman tipleri Eğer framesetler kullanmak ve aynı zamanda dokümanınızın doğrulanmasını istiyorsanız aşağıdaki doküman tiplerini tercih edebilirsiniz. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Fonksiyonel olarak HTML 4.01 geçiş ve XHTML 1.0 geçiş ile aynıdır. Bunların framset kullanımına izin veren halleridir. Ancak frameset lerin kullanılmaması tavsiye edilir. Diğer doküman tipleri Zaman zaman diğer doküman tipleri ile de karşılaşabilirsiniz ancak onlar zamanı geçmiş doküman tipleridir. Kullanmamanız tavsiye edilir. Gevşek ve katı söz dizimleri Daha önceki derslerimizde XHTML ve HTML arasındaki farka ve söz dizimi farklarına değinilmişti. Burada tekrar değinilmeyecektir. Genel bir not olarak, HTML5 de her ne kadar, her iki söz dizimi de kullanılabilirse de, XML söz diziminin katı kurallarının kullanılması tavsiye edilir. Hataları engellemek ve bir stil oluşturmak açısından bu oldukça farklı olacaktır. Not: Bu materyalin orijinali W3C Web Standarts Curriculum çalışmasının bir parçası olarak Doctypes and markup styles adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

9 HTML Giriş Bölüm 3. HTML head elemanı Giriş Bu dokümanda, HTML işaretleme dilinin head elemanı içerisinde bulunan temel, elemanlara değinilecektir. Head Bir web geliştiricisi olarak vaktinizin çoğunu <body> etiketleri içerisinde geçireceksiniz. Görünürde <head> etiketleri içerisinde daha az içerik bulunmaktadır. Bu içerikler kullanıcılara gösterilmez. Bu içerikleri, web tarayıcı, dokümanınız hakkında daha detaylı bilgi edinmek için kullanır. Dokümanın ana dilini ayarlama <html lang="en-gb">... </html> Dokümanın ana dilini yani doğal dilini (örn. Türkçe, İngilizce vb.) ayarlayabiliriz. Ekran okuyucular, bu dil bilgisini kullanarak, doğal dilde yazıyı okurlar. Özellikle uluslararası ziyaretçilere açık sitelerde bu daha da önemlidir. Eğer bunu yapmazsanız, arama motorlarının web gezginleri dökümanınızı işlemekte zorluk çekerler. Aynı zamanda çeşitli elemanların, lang özelliklerini kullanarak, dokümanınızın belli bölümlerinde farklı diller de ayarlayabilirsiniz. Örn. <span lang= fr >Bonjour<span> Bu özelliklerin isimlerin doküman tiplerine göre şekillenebilir. Örneğin lang, xml:lang gibi. Dil kodları, tr örneğindeki gibi iki harfli olabileceği gibi, en-us örneğinde olduğu gibi dört hafli olabilir. Dokümanın karakter kodlamasını ayarlama

10 HTML5 deki bir diğer önemli özellik dokümanınızın karakter kodlamasını belirleyebiliyor olmanızdır. <meta charset="utf-8" /> Buradaki utf-8, uluslararası karakter kodlamasıdır. utf-8 karakter kodlaması ile bir çok dile ilişkin karakterler gösterilebilir. Bu karkater kodlamasını kullanmanız tavsiye edilir. Dokümanı, başlığına göre değerlendirmek head içerisindeki en önemli elemanlaradan bir tanesi title adlı başlık elemanıdır. Başlık elemanı içerisindeki metin, bütün web tarayıcıların başlık çubuğunda gösterilecektir. Bu içerik, bütün kullanıcıların sitenizi ziyaret ettiklerinde ilk görecekleri bilgi olacaktır. Ekran okuyucuları, bunu ilk olarak okurlar ve kullanıcıya sayfanız hakkında ilk bilgi olarak bu bilgiyi verirler. Arama motorları da bu metni aynı şekilde değerlendirirler. Şimdi aşağıdaki örneği yazarak web tarayıcınızda açın. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>i am a title example</title> </head> <body> </body> </html> Bu sayfanın çıktısının aşağıdaki şekilde olduğunu göreceksiniz.

11 Şekil 1: Web tarayıcıda, başlığın gösterilmesi. Başlığınızı, arama motorlarında üst kısımda görünmek amacıyla karmaşık hale getirmeyin. Dokümanınızı temsil eden net bir cümle yazın. Anahtar kelimeler ve açıklama eklemek Ziyaretçilerin göremeyeceği diğer iki özellik, açıklama ve anahtar kelimelerdir. Bu bilgiler head içerisine meta elamanı ile eklenir. Yahoo! Eurosport sitesindeki bir örnek aşağıda verilmiştir. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>yahoo! UK & Ireland Eurosport Sports News Live Scores Sport</title> <meta name="description" content="latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more."> <meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"> </head> <body> </body> </html> Bu dokümanı web tarayıcınızda açtığınız takdirde bu bilgileri orada görmeyeceksiniz. Ancak bu siteyi arama motorunda ararsanız yazılmış olan açıklamanın arama sonuçlarının özet kısımlarında göreceksiniz. Dolayısıyla bu bilgi arama motorları ve arama motorlarından sitenize

12 gelecek olan ziyaretçileri yönlendirmesi açısından oldukça önemlidir. Şekil 2: Arama motoru sonuçlarında görünen açıklamalar. Açıklamaların bir diğer amacı daha vardır. Bazı web tarayıcılar, sayfanın ek bilgi kısımlarında bu bilgiyi gösterirler. Aynı zamanda, favoriler kısmında da gösterilirler. Şekil 3: Favorilere eklenmiş dokümandaki açıklamalar.

13 Dolayısıyla, dokümanlarınıza açıklama eklemek, web sayfanızın başarısı açısından oldukça önemlidir. Aynı şey, açıklamalar kadar olmasa da, anahtar kelimeler için de geçerlidir. Her ne kadar anahtar kelimelere, arama motorları artık pek itibar etmiyorlarsa da dokümanlarınızı indekslemek açısından oldukça önemlidir. Örneğin bir içerik yönetim sistemi için meta anahtar kelimelerini indekslemede kullanabilirsiniz. Stil eklemek head bölümüne ekleyeceğiniz bir sonraki şey, stil kurallarıdır. Sayfanızın stil kurallarını CSS dosyalarında tanımladıktan sonra bu dosyaları head elemanı içerisine ekleyebilirsiniz. Aynı zamanda stilleri direk olarak head içerisine de yazabilirsiniz. Aşağıdaki kodda bunun bir örneğini görmektesiniz. style elemanını incelerseniz, bu stillerin nasıl ekelenbileceğini görebilirsiniz. Aşağıdaki sayfayı kaydederek, web tarayıcınızda açın ve sonuçlarınızı inceleyin. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>breeding Dogs Tips about Alsatians</title> <meta name="description" content="how to breed Alsatians, tips on proper breeding and information about common issues with this breed."> <meta name="keywords" content="dogs,alsatian,breeding,dog,tips,free,pet"> <style type="text/css"> body{ background:#000; color:#ccc; font-family: helvetica, arial, sans-serif; } </style> </head> <body> <p>test!</p> </body> </html> style elemanının bir diğer özelliği media özelliğidir. Bu özelliği kullanarak, ilgili stilin hangi durumlarda sayfanıza uygulanacağını belirleyebilirsiniz. Örneğin, screen özelliği uygulanmış olan stil, yalnızca bilgisayar ekranlarında gösterilecektir. İçerik tipleri aşağıdaki şekildedir.

14 screen monitör çıktısı. print yazıcı çıktısı. handheld mobil cihazlar. projection sunum. Örneğin sayfanızın çıktısı alınırken, daha uygun bir çıktı isterseniz, yukarıdaki örneğe aşağıdaki stili uygulayın. Çıktı ön izlemede aşağıdaki sonuçları göreceksiniz. <style type="text/css" media="print"> body{ background:#fff; color:#000; font-family: helvetica, arial, sans-serif; font-size:300%; } </style>

15 Şekil 4: Ekran ve yazıcı stil sayfası. JavaScript kullanarak dinamik özellikler eklemek head kısmına ekleyebileceğiniz bir diğer özellik -istemci taraflı betik- olarak adlandırılan JavaScript betikleridir. JavaScript betğini script elemanı kullanarak ekleyebilirsiniz. Bir web tarayıcı, JavaScript koduna rastladığında herşeyi durdurarak JavaScript kodunu işletir.

16 Sayfanız açılır açılmaz bir işlem yapmak istiyorsanız, head kısmına bir JavaScript kodu yazabilirsiniz. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>breeding Dogs Tips about Alsatians</title> <meta name="description" content="how to breed Alsatians, tips on proper breeding and information about common issues with this breed."> <meta name="keywords" content="dogs,alsatian,breeding,dog,tips,free,pet"> <style type="text/css" media="screen"> body{ background:#000; color:#ccc; font-family: helvetica, arial, sans-serif; } a {color:#fff} </style> <style type="text/css" media="print"> body{ background:#fff; color:#000; font-family: helvetica, arial, sans-serif; font-size:300%; } </style> <script> function leave(){ return confirm("this will take you to another site,\n are you sure you want to go?") } </script> </head> <body> Test! <a href=" onclick="return leave()">the Daily Puppy</a> </body> </html> Bu örneği yazıp çalıştırarak sonuçlarını gözlemleyin. Satır içi CSS ve JavaScript çok zekice değildir CSS ve JavaScript kodlarını html içerisine eklemek Sayfanın bakımını zorlaştırır.

17 Ekran okuyucu vb. programların sayfayı ayrıştırmasını zorlaştırır. Web gezginlerini olumsuz yönde etkiler. Basit bir yaklaşım değildir. Bunun yerine, CSS ve JavaScript kodlarınızı başka dosyalarda yazabilir ve dosyanın yolunu bir bağlantı (link) olarak, html sayfanızda belirtebilirsiniz. JavaScript için script elemanı içerisindeki src özelliği ile bunu belirtebilirsiniz. CSS için ise link elemanını kullanmalısınız. Aşağıda bir JavaScript dosyası linki içeren bir html dokümanı görülmektedir. Yukarıdaki örnekte bulunan JavaScript kodunu leaving.js adlı bir dokümana kopyalayın ve sayfanızı görüntülemeye çalışın. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>breeding Dogs Tips about Alsatians</title> <meta name="description" content="how to breed Alsatians, tips on proper breeding and information about common issues with this breed."> <meta name="keywords" content="dogs,alsatian,breeding,dog,tips,free,pet"> <style type="text/css" media="screen"> body{ background:#000; color:#ccc; font-family: helvetica, arial, sans-serif; } a {color:#fff} </style> <style type="text/css" media="print"> body{ background:#fff; color:#000; font-family: helvetica, arial, sans-serif; font-size:300%; } </style> <script src="leaving.js"></script> </head> <body> Test! <a href=" onclick="return leave()">the Daily Puppy</a> </body> </html>

18 Aşağıdaki örnekte JavaScript in yanı sıra CSS de ayrı bir dosyaya alınmıştır. Yukarıdaki kodda bulunan stil bölümlerini styles.css ve printstyles.css dosyalarına kaydederek, aşağıdaki dokümanı web tarayıcınızda görüntüleyin. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>breeding Dogs Tips about Alsatians</title> <meta name="description" content="how to breed Alsatians, tips on proper breeding and information about common issues with this breed."> <meta name="keywords" content="dogs,alsatian,breeding,dog,tips,free,pet"> <link rel="stylesheet" type="text/css" media="screen" href="styles.css"> <link rel="stylesheet" type="text/css" media="print" href="printstyles.css"> <script src="leaving.js"></script> </head> <body> Test! <a href=" onclick="return leave()">the Daily Puppy</a> </body> </html> Stil ve betikleri ayrı dosyalarda tutmak oldukça avantajlı ve basit bir yaklaşımdır. Not: Bu materyalin orijinali Christian Heilmann tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 13: The HTML <head> element adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak The HTML head element adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

19 HTML Giriş Bölüm 4. head hakkında daha fazla bilgi Giriş Bir önceki dokümanda head elemanı hakkında bilgi sahibi olmuştunuz. Bu dokümanda ise head elemanının daha az kullanılan ancak yerine göre zaman zaman oldukça etkili olan, elemanlarına değinilecektir. Doküman ilişkileri - Birden fazla dokümanı bir doküman koleksiyonu haline dönüştürme HTML dilinin, temel özelliklerinden bir tanesi doküman ilişkileridir. Bu kavram, bir dokümanın diğer dokümanlar ile nasıl bir ilişki içerisinde olduğunu ifade etmek için kullanılır. Bu özelliğin kullanımını bir önceki dokümanda vermiş olduğumuz örneklerdeki link elemanlarında gördünüz. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>breeding Dogs - Tips about Alsatians</title> <link rel="stylesheet" type="text/css" media="screen" href="styles.css"> <link rel="stylesheet" type="text/css" media="print" href="printstyles.css"> </head> <body> </body> </html> Bir dokümanın bir diğer dokümanla ilişkisi link elemanı kullanılarak gerçekleştirilir. Bu elemanın rel ve rev özellikleri bu konuda yardımcı olur. rel özelliği (relationship-bağ) dokümanlar arasındaki bağı belirtirken, rev özelliği (reverse relationship-ters bağ) ise bunun tersini ifade eder. Bu özelliklerden faydalanarak, bir dokümantasyon web sitesinde içerik ve doküman linklerini rahatlıkla oluşturabilirsiniz. Örneğin yukarıdaki kod örneğinde rel özelliğine stylesheet değeri verilerek bu dokümanın bağlı olduğu stil sayfaları hakkında bilgi verilmiştir.

20 Bir dokümanın alternatif sürümlerine link verme Bir önceki bölümde anlatılmış olan rel özelliğini kullanarak bir dokümanın alternatif sürümlerine, örneğin farklı dildeki bir sürümüne link verebilirsiniz. Bunu için bu özelliğin değerini alternate olarak belirlemelisiniz. Tercümeler Dahili linkleme için, tercümeler güzel bir örnektir. Orijinal dokümandan, farklı dillerdeki sürümlerine linkler verebilirsiniz. Aşağıdaki kod bunu nasıl yapabileceğinizi gösteren bir örnektir. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>multiple Languages example</title> <link rel="contents" title="table of contents" href="toc.html"> <link rel="next" title="next: chapter one" href="chapter1.html"> <link rel="alternate" title="the course in Dutch" type="text/html" hreflang="nl" href="../nl/start.html"> <link rel="alternate" title="the course in German" type="text/html" hreflang="de" href="../de/start.html"> </head> <body> <h1>course example</h1> <p>this would be the cover page of an article series or course</p> <ul> <li><a href="chapter1.html" rel="next">let's start with Chapter One</a></li> </ul> <ul> <li>other languages: <ul> <li><a href="../de/start.html" lang="de" hreflang="de">deutsch</a></li> <li><a href="../de/start.html" lang="nl" hreflang="nl">nederlands</a></li> </ul> </li> </ul> </body> </html> Dikkat edilirse, hreflang özelliği bağlı dokümanın dilini gösterirken, lang özelliği ise içinde bulunduğu elemanın içerisindeki metnin dilini belirtir. Bu farkı bilmek özellikle erişilebilirlik açısından çok önemlidir. Ekran okuyucular dilleri fark edebilmeli ve buna göre okuma dilini değiştirebilmelidir.

21 Kaynaklar (Feeds) Bir kaynak, sitenize eklediğiniz yeniliklerin özetini tutan bir dokümandır. Ziyaretçileriniz kaynağınıza erişebilir ve kronolojik olarak sitenizde yapılan değişiklikleri izleyebilir. Bu işlemi, kaynak okuyucu (örn. Google Reader vb.) adı verilen uygulamalar yardımıyla gerçekleştirirler. Bazı web tarayıcılarda ve elektronik posta uygulamalarında da bu özellik mevcuttur. Bunu RSS sembolü ile görebilirsiniz. Şekil 2 de bu görülmektedir. Şekil 2: Opera web tarayıcısında RSS kaynağı. Kaynak sayfaları, HTML veya XML olarak biçimlendirilir. Genellikle el ile oluşturulmazlar. Yayınlama sistemleri bunu otomatik olarak hazırlar ve siz sadece dokümanın linkini, doğru meta elemanı ile yayınlarsınız. Aşağıdaki örnek bir RSS kaynağına gönderim yapan örnektir. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <link rel="alternate" type="application/rss+xml" title="wait till I come! RSS Feed" href=" <title>wait till I come!</title> </head> <body> <p>example of an RSS feed</p> </body> </html> Özellikle içerik yoğun sitelerde kaynak kullanmayı düşünebilirsiniz. Yer işaretlerini favicon ile güzelleştirme Bu bölümdeki son bir konu kısayol simgeleri olan favicon lardır. Bunlar.ico uzantılı küçük resim dosyalarıdır. Bu simgeler web tarayıcının adres çubuğunda ve aynı zamanda yer imleri bölümünde web sitesinin adı yanında gösterilir. Bunun bir örneği Şekil 3 de görülmektedir.

22 Şekil 3: Favicon örneği. Bu simgeleri, shortcut-icon meta elemanı kullanarak ekleyebilirsiniz. Dikkat etmeniz gereken hususlardan bir tanesi, Internet Explorer dışındaki tüm tarayıcılar.ico haricindeki formatları da desteklerken, Internet Explorer yalnızca.ico formatını desteklemektedir. Buradaki en kritik konu, ilgili simgeyi oluşturmaktır. genfavicon bu işlemleri yapabileceğiniz bir araçtır. Ancak bundan farklı araçlar da temin edebilirsiniz. Simgenizi oluşturduktan sonra, link elemanının rel özelliğine Shortcut Icon değeri vererek, link elemanı içerisinden bu simgenizi çağırmaya hazır hale gelebilirsiniz. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>shortcut Icon example</title> <link rel="shortcut Icon" href="favicon.ico" type="image/x-icon"> </head> <body> <h1>example of a shortcut icon</h1> </body> </html> Bu örneği gerçek bir simge kullanarak web tarayıcınızda deneyin ve sonuçlarını gözlemleyin.

23 Not: Bu materyalin orijinali Christian Heilmann tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, Supplementary: More about the document <head> adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak More about the document head adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

24 HTML Gövdesi Bölüm 1. Metinsel içeriğin işaretlenmesi Giriş Bu dokümanda, HTML nin temellerine değineceğiz. Bunu anlatırken, dokümanınızın gövdesindeki içeriği HTML kullanarak nasıl işaretleyebileceğinizi anlatacağız. Başlıklar, paragraflar, gömülü alıntılar ve kodlar gibi genel yapısal elemanlara değineceğiz. Daha sonra satıriçi içerik konusuna değinecek ve eski moda sunuma yönelik içeriği anlatacağız. Boşluk - son sınır HTML de ilk aşamalardan birisi boşluk karakterini öğrenmektir. Diğer birçok sistemin aksine HTML de birden fazla boşluk karakteri yalnızca tek bir boşluk karakteri olarak değerlendirilir. Örneğin: <h3>in the beginning</h3> kodu, web tarayıcı tarafından <h3>in the beginning</h3> olarak yorumlanacaktır. Dolayısıyla web tarayıcı ekranında In the beginning yazısı görünecektir. Bunu engellemenin yolu <pre> elemanı kullanmaktır. Buna daha sonra değinilecektir. Bu yorumlama, HTML ye yeni başlayanlar için kafa karıştırıcı olabilir. Dokümanlarınızın görsel düzenini belirleme işini HTML içerisinde değil, CSS yardımıyla gerçekleştirebilirsiniz. Blok seviyesi elemanları Bu bölümde, metni biçimlendirmek için kullanılan ortak blok seviyesi elemanlarından bahsedilecektir.

25 Sayfa kesimi başlıkları Web içeriğinizin her bir parçası, muhakkak bir başlık ile başlamalıdır. HTML altı seviye başlık tanımlamaktadır: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Genel olarak konuşacak olursak <h1>, tüm sayfanın ana başlığı olacaktır. <h2>, sayfayı kesimlere ayırmak için kullanılır. <h3> alt bölümleri belirler. Ve bu hiyerarşi bu şekilde devam eder. Dokümanları, bölüm, alt bölüm, alt alt bölüm gibi farklı başlık seviyeleri ile tanımlamak önemlidir. Ziyaretçilerin ve uygulamaların dokümanınızı takip etmesini kolaylaştırır. Örneğin bu tür bir doküman için başlık kullanımının bir örneği aşağıdaki gösterilmiştir. <h1>marking up textual content in HTML</h1> <h2>introduction</h2> <h2>space the final frontier</h2> <h2>block level elements</h2> <h3>page section headings</h3> <h3>generic paragraphs</h3> <h3>quoting other sources</h3> <h3>preformatted text</h3> <h2>inline elements</h2> Genel paragraflar Paragraf birçok dokümanın yapı taşıdır. HTML de paragraf, özel bir özellik almayan <p> elemanı ile tanımlanır. Örneğin: <p>this is a very short paragraph. It only has two sentences.</p> İçeriğiniz, herhangi başka bir nosyona uymuyorsa, her ne kadar anlamsal olarak paragraf olarak sayılamasa da, bu içeriği parağraf olarak tanımlayabilirsiniz. Diğer kaynakları alıntılama Makaleler, günce yazıları ve referans dokümanları çoğunlukla, diğer dokümanların bir parçasını ya da tamamını alıntılarlar. HTML de bu işlem <blockquote> elemanı ile işaretlenir. <blockquote> elemanı metin içeremez. Bunun yerine başka blok seviyesi elemanı içermek zorundadır. Bu noktada alıntı yapmak istediğiniz içeriğin sahip olduğu blok seviyesi elemanı buarada kullanmanız en uygunudur. Örneğin parağraf alıntılıyorsanız <p> vb. kullanmalısınız. Eğer alıntı başka bir web sayfasından geliyorsa, bunu cite özelliği ile belirtebilirsiniz. <p>html 4.01 is the only version of HTML that you should use when creating a new web page, as, according to the specification:</p>

26 <blockquote cite=" <p>this document obsoletes previous versions of HTML 4.0, although W3C will continue to make those specifications and their DTDs available at the W3C Web site.</p> </blockquote> Aslında cite özelliği kendi başına birşey yapmaz. Ancak, alıntıların nereden alındığının kaydını tutmak önemlidir. Daha sonra bunu kullanabilirsiniz. Biçimlendirilmiş metin Biçimlendirme ve boşluk, saklanmak istendiği takdirde <pre> elemanı kullanılır. Aşağıdaki örnekte Perl programlama dilinde yazılmış olan bir kod parçası görmektesiniz. <pre><code class="language-perl"> # read in the named file in its entirety sub slurp { my $filename = shift; my $file = new FileHandle $filename; if ( defined $file ) { local $/; return <$file>; } return undef; }; </code></pre> Bu kod, birçok web tarayıcıda, biçimlendirilmiş olarak ve boşlukları muhafaza edilmiş olarak, yazdığımız gibi görünür. Bu örnekte <code> elemanının kullanımını da görmektesiniz. Bu her ne kadar daha sonra açıklanacak olsa da burada bunu inceleyebilirsiniz. Satır içi elemanları Bu bölümde yaygın satır içi elemanlara değinilecektir. Kısa alıntılar Normal bir cümle veya paragraf içerisindeki kısa alıntılar <q> elemanı kullanılarak gerçekleştirilir. Bu eleman <blockquote> elemanı gibi cite özelliği içerir. Kısa alıntı, tırnak işaretleri içerisinde gerçeklenmelidir ve bu görev web tarayıcıya aittir. Bu, net olarak HTML spesifikasyonunda belirtilmiştir.

27 Aşağıda bir kısa alıntı örneği görülmektedir. <p>this did not end well for me. Oh well, <q lang="fr">c'est la vie</q> as the French say.</p> Vurgu HTML, vurgu göstermek için dört eleman içerir. Vurgular, önemli metinleri, uyarıları vb. göstermek için kullanılır. Vurgu, görsel tarayıcılarda, farklı renkler kullanmak, metni kalın veya italik yapmak vb. suretiyle gerçekleştirilir. Ekran okuyucu kullanıcıları için ise, farklı bir ses ile veya sessel efekt ile belirtilir. <em> Bir cümlenin anlamını zarif bir biçimde değiştiren bir vurgu için bu elemanı kullanabilirsiniz. Örneğin: <p><em>please</em> remember to unplug the kettle at night.</p> <i> Bu eleman HTML4 de italik anlamındaydı ve takdim ile ilgili bir elemandı. Ancak HTML5 de bir alternatif bir vurgu gerektiren durumlarda kullanılır. Aşağıdaki örnekleri uygulayarak bunun daha net sonuçlarını test edebilirsiniz. <p>as we sailed into port, we spied the <i>black Pearl</i> moored at the dock.</p> <p>book: <i>living with a Diminutive Stature</i>, Bruce Lawson, Peachpit Press, published <time pubdate=" ">1st August 2011</time>, ISBN </p> <p>she really does add that little bit of <i lang="fr">je ne sais quoi</i>.</p> <strong> <strong> elemanı, içeriğin güçlü vurgulu olduğunu göstermek için kullanılır. Bunu çevreleyen içerikten daha önemli olduğunu ifade eder. Örneğin: <p>there are a total of twenty different species living inside this enclosure. <strong>warning: Do not feed them: they will eat your shoes</strong>.</p> <b> <b> elamanı da önceleri içeriğin takdimi için kullanılırken, HTML de daha farklı bir anlamı mevcuttur.

28 Bu eleman, içeriğinin biçimsel olarak, diğer içerikten çıkıntılı olduğunu ancak daha önemli olmadığını ifade eder. <p>in this article, Chris Mills will show you how to combine <b>html5</b>, <b>css3</ b>, <b>coloured card</b> and <b>string</b> to create an attractive mobile for your child's bedroom.</p> Vurgu elemanlarını birleştirmek Farklı türdeki vurgu elemanlarını, iç içe veya birleştirerek kullanabilirsiniz. Aşağıda bunun bir örneğini görmektesiniz. <p><em>please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode - <strong>killing us all</strong></em>.</p> Küçük baskı HTML4 de takdimsel amaçla kullanılan bir diğer eleman <small> elemanıdır. Bu eleman HTML4 de bir metni daha küçük göstermek için kullanılırken, HTML5 de, yasal uyarılar, feragatname, telif hakkı, atfetme ifadeleri veya lisans bilgileri gibi küçük baskıları ifade etmek için kullanılır. Örneğin: <p><small>this content is released under a <a rel="license" href=" creativecommons.org/licenses/by-sa/3.0/"> Creative Commons Attribution Share-alike license</a>.</small></p> Zamanı söyleme HTML5 de yeni gelen bir eleman <time> elemanıdır. Bu eleman, metninizdeki zaman ve tarihleri kesin bir şekilde işaretlemenize yardımcı olur. Böylelikle makinanın anlayabileceği şekilde zaman ve tarih bilgilerinizi ISO formatında belirtmiş olursunuz. Örneğin: <p>i was born on the <time datetime=" ">27<sup>th</sup> June 1978</time>.</ p> Bu ifadeyi istediğiniz şekilde farklı formlarda yazabilirsiniz. <p><time datetime=" ">june my birthday</time>.</p> Bunun yanı sıra, tarihin hemen ardından bir T harfi ile birlikte zaman bilgisi de belirtebilirsiniz. <p><time datetime=" t21:00">9pm on my birthday</time>.</p> Yalnızca zamanı da belirtebilirsiniz.

29 <p><time datetime="21:00">9pm</time>.</p> Tabii buradaki bir kısıt, net olmayan bir tarihi (örn. Ağustos 2012 gibi) belirtemeyeceğinizdir. Ancak zamanın ardından saniye, milisaniye, zaman dilimini de belirtebilirsiniz. Örneğin: <p><time datetime=" t21:00: :00">9pm and 6 milliseconds on my birthday, in Pacific standard time</time>.</p> Bu elemanın içerisine pubdate özelliği ekleyerek, içeriğin ne zaman yayınladığını da belirtebilirsiniz. <p>published on <time datetime=" " pubdate>july 27<sup>th</sup> 2011</ time>.</p> Takdime yönelik elemanlar - bunları asla kullanmayın HTML 4 spesifikasyonu, birçok takdime yöenlik eleman içerir. Bu elemanlar içerğin ne olduğunu ifade etmekten ziyade, içeriğin nasıl görüntülenmesi gerektiğini belirten elemanlardır. Bunların birçoğu HTML5 ile birlikte kaldırılmıştır. Burada tarihi bilgi amaçlı olarak bu elemanlara değinilecektir ancak bu elemanlar, asla modern web sayfalarında kullanılmamalıdır. Bunlar yerine CSS kullanılarak stil verilmelidir. <font face=" " size=" "> İçerisindeki metnin, görüntüleneceği yazı tipi ve boyutunu belirtmek için kullanılır. <u> İçeriğindeki metnin altı çizilecektir. <tt> İçeriğindeki metin, teletype ya da monospace bir yazı tipi ile gösterilecektir. Bu etki CSS ile ya da daha anlamsal bir eleman olan <pre> elemanı ve bunun içerisinde <code> elemanı ile elde edilebilir. Bunun örneği, bu dokümanın başındadır. <big> İçeriğindeki metnin boyutunu büyütmek için kullanılır. Not: Bu materyalin orijinali Mark Norman Francis tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 15: Marking up textual content in HTML

30 adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak Marking up textual content in HTML adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

31 HTML Gövdesi Bölüm 2. HTML Listeleri Giriş Listeler, birbiri ile ilişkili bir grup bilgiyi bir araya toplamak için kullanılan yapılardır. Günümüz web geliştirme ortamında, navigasyon ve genel içerik için kullanılan temel elemanlardandır. Listeler yardımıyla, iyi organize edilmiş, kolay düzenelenebilen dokümanlar oluşturabilir, bunlara CSS yardımıyla da stil verebilirsiniz. Bu dokümanda HTML deki listeler anlatılacaktır. Üç liste tipi HTML de üç tür liste mevcuttur. sırasız liste (unordered list) - Birbiriyle ilişkili bir elemanlar kümesini, belli bir sıra dahilinde olmaksızın gruplandırmak için kullanılır. sıralı liste (ordered list) - Birbiriyle ilişkili bir elemanlar kümesini, belli bir sıra dahilinde gruplandırmak için kullanılır. açıklama listesi (description list) - terimler ve açıklamaları, zamanlar ve olaylar gibi isim/değer çiftlerini göstermek için kullanılır. Sırasız listeler Sırasız listeler ya da madde işaretli listeler, herhangi bir sırada gösterilebilecek olan elemanlar için kullanılır. Örnek bir alışveriş listesi aşağıdaki gibidir: süt ekmek kahve yağ Bütün bu maddeler bir listenin parçasıdır ve herhangi bir sırada kullanıldığı zaman da bir anlam ifade eder. ekmek süt yağ kahve

32 Listelerin görünümünü CSS kullanarak değiştirebilirsiniz. Sırasız listelerin işaretlenmesi Sırasız liste oluşturmak için bir <ul></ul> elemanı içerisine, liste elemanı sayısınca <li></li> elamanları kullanılır. <code><ul> <li>ekmek</li> <li>süt</li> <li>yağ</li> <li>kahve</li> </ul></code> Sıralı listeler Sıralı listeler ya da numaranlanmış listeler, belli bir sırada gösterilmesi gereken elemanlar listesini temsil etmek için kullanılır. Bir örneği, belli bir sırada gerçekleştirilmesi gereken yemek tarifi listesidir: 1. İçerikleri al 2. İçerikleri karıştır 3. İçerikleri bir fırın tepsisine koy 4. Bir saat boyunca fırında pişir 5. Tepsiyi fırından çıkart dakika beklemeye bırak 7. Servis yap Eğer liste elemanları başka bir sıraya konulursa, bilgi artık bir anlam ifade etmez. 1. İçerikleri karıştır 2. Bir saat boyunca fırında pişir 3. İçerikleri bir fırın tepsisine koy 4. İçerikleri al 5. Servis yap 6. Tepsiyi fırından çıkart dakika beklemeye bırak Sıralı listeler, birçok numaralı ya da alfabetik sistemle ifade edilebilir. Birçok tarayıcı, rakamları tercih eder ancak farklı gösterimleri de mevcuttur. Aşağıda bunların örnekleri gösterilmektedir. Harfler Küçük harf ascii harfleri (a, b, c...) Büyük harf ascii harfleri (A, B, C...) Küçük harf klasik Yunan (έ, ή, ί ) Rakamlar Onlu sayılar (1, 2, 3...) Sıfır ile başlayan onlu sayılar (01, 02, 03...)

33 Küçük harf Roman rakamları (i, ii, iii...) Büyük harf Roman rakamları (I, II, III...) Sıralı listelerine de, tüm listelerde olduğu gibi CSS kullanarak stil verebiliriz. Sıralı liste işaretlemesi Sıralı liste işaretlemesi <ol></ol> elemanı içerisinde, her bir liste eleman için <li></li> elemanları kullanılarak gerçekleştirilir: <code><ol> <li>içerikleri al</li> <li>içerikleri karıştır</li> <li>içerikleri bir fırın tepsisine koy</li> <li>bir saat boyunca fırında pişir</li> <li>tepsiyi fırından çıkart</li> <li>10 dakika beklemeye bırak</li> <li>servis yap</li> </ol></code> 1 den farklı bir rakamla sıralı listelere başlama Sıralı listelere, 1 haricinde bir rakam ile de başlamak mümkündür. Bunu gerçekleştirmek için <start> elemanı kullanılır. Bu elemanın kullanımı aşağıda gösterilmiştir. <code><ol> <li>içerikleri al</li> <li>içerikleri karıştır</li> <li>içerikleri bir fırın tepsisine koy</li> </ol></code> <p class="note">içerikleri fırın tepsisine koymadan önce bir sonraki adım için fırını 180 derce sıcaklığa ayarlayın.</p> <ol start="4"> <li>bir saat boyunca fırında pişir</li> <li>tepsiyi fırından çıkart</li> <li>10 dakika beklemeye bırak</li> <li>servis yap</li> </ol></code> Bu eleman, HTML4 de tedavülden kaldırılmıştır. Dolayısıyla HTML4 katı söz dizimi uyguluyorsanız dokümanınız doğrulanmayacaktır. Ancak, HTML5 de yeniden kullanıma sunulmuştur. Açıklama listeleri Açıklama listeleri, bir liste içerisindeki belli isimleri değerli ile ilişkilendirmek için kullanılır. Örneğin, içerikler ve açıklamaları, makaleler ve yazarları vb. birçok listeyi bu liste türüyle oluşturabilirsiniz. Alışveriş listesini, biraz detaylandıralım:

34 süt Beyaz, sıvı mandıra ürünü ekmek Undan yapılan pişirilmiş yiyecek yağ Sarı, katı mandıra ürünü kahve Belli kahve ağaçlarından elde edilmiş çekirdekler Bu listelerde en az bir isim/değer çifti olmalıdır. Bir isim için birden fazla değer belirtebilirsiniz. Aynı şekilde, aynı değere sahip birden fazla isim de kullanabilirsiniz. Bir açıklama listesini <dl><dl> elemanı içerisinde yazarız. Bunun içerisine, isimler için <dt><dt> elemanı ve açıklamalar içinse <dd><dd> elemanı kullanılırız. Burada dikkat edilmesi gereken nokta en az bir tane çifti birlikte bulundurmak gerektiğidir. Örnek bir liste aşağıda verilmiştir. <dl> <dt>name</dt> <dd>value</dd> <dt>name</dt> <dd>value</dd> <dt>name</dt> <dd>value</dd> </dl> Bunun çıktısı aşağıdaki gibi olur. Name Value Name Value Name Value Liste tipleri arasından seçim yapmak Hangi listeyi kullanacağınıza karar vermek için aşağıdaki iki soruyu sorabilirsiniz: 1. Terimler ya da isim/değer çiftleri açıklıyor muyum? a. Eğer evet ise açıklama listesi kullan. b. Eğer hayır ise açıklama listesi kullanma. Bir sonraki soruya geç. 2. Liste elemanlarının sırası önemli mi? a. Eğer eveet ise sıralı liste kullan.

35 b. Eğer hayır ise sırasız liste kullan. HTML listeleri ve metin arasındaki fark Metinleri de liste gibi yazabilecekken neden HTML listeleri kullanıldığını ve bunlar arasındaki farkı merak ediyor olabilirsiniz. Bunun sebepleri aşağıda verilmiştir. Sıralı bir listede, sırayı değiştirmek için yalnızca liste elemanlarının yerini değiştirmeniz yeterlidir. Ancak rakamları elle yazdığınız zaman değiştirdiğiniz tüm liste elemanlarının rakamlarını da el ile değiştirmek zorundasınız. CSS ile listelere belli bir stil vermek daha kolaydır. Metin kullanırsanız yukarıdaki gibi tüm elemanları ayrı ayrı stillendirmek zorundasınız. HTML listeleri, içerğe liste görünümü vermenin yanı sıra anlamsal olarak da yapı katar. Böylelikle, ekran okuyucu vb. engellilere yönelik programlar listelerinizi kolaylıkla okuyabilir. Sonuç olarak listeler ve metin aynı şey değildir. Listeler yerine metin kullanmak işinizi zorlaştırır. İç içe listeler Bir liste elemanı, bir diğer listeyi içerebilir. Bu özellik, içindiler tablosu vb. yapılarda kullanılabilir. Örneğin: 1. Chapter One a. Section One b. Section Two c. Section Three 2. Chapter Two 3. Chapter Three Not: Bu materyalin orijinali Ben Buchanan tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 16: HTML lists adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak HTML Lists adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.

36 HTML Gövdesi Bölüm 3. HTML de Görüntü (Resimler) Bir resim bin kelimeden daha çok şey söyler ya da söyler mi? Birçok görsel (resim) öğe kullanmak web sayfalarınızı çok cazip kılar. Görsel öğeler, ziyaretcileri havaya sokmak ve karmaşık bilgileri kolaylaştırmak için çok iyi bir yoldur. Webdeki resimlerin zorluğu, web de gezen herkesin onları görememesidir. Geçmişte resimler web tarayıcısı tarafından desteklendiğinde birçok ziyaretçi indirme maliyetinden dolayı resimlere bakmazdı ve web de daha hızlı gezinirdi, çünkü bağlantı yavaşlar ve çevrimiçi kaldığınız her süre ödediğiniz para artardı. Bu günlerde böyle bir sıkıntı yaşanmasa da bazı diğer problemler bulunmaktadır: Mobil cihazlarla bağlantı kuranlar, küçük ekran boyutu ve veri indirme maliyetinden dolayı resimleri kullanamayabilirler. Sitenizin ziyaretçileri kör ya da görme problemi olan kişiler olabilir ve bu kişiler resimlerinizi uygun şekilde göremeyebililer. Farklı kültürden olan ziyaretçiler kullandığınız ikon ya da diyagramları anlamayabilirler. Arama motorları sadece metin arar ve şimdilik resim analiz etmezler ki bu da bilgi içeren görüntülerin bulunamayacağı manasına gelir. Resmi seçmek ve gerekli durumlarda kullanmak önemlidir. Şimdi de HTML dokümanına resim ekleme ile ilgili teknolojilere göz atalım. Web de değişik türde görüntüler (resimler) içerik ve arkaplan görüntüleri Bir dökümana resim eklemenin iki ana yolu vardır: içerik resimleri için <img> elemanını kullanma ve bileşenlere uygulanan arkaplan resimleri için CSS kullanma. Hangisini kullanmanız gerektiği şunlara bağlıdır: 1. Eğer dokümanın içeriği açısından resim önemliyse; örneğin bir yazarın fotografını gösteriyorsanız ya da verilernizi sunan bir grafik gösteriyorsanız; bunlar için <img> elemanını, uygun bir metin ekleyerek kullanabilirsiniz. 2. Eğer yalnzca göze hoş gelmesi gereken bir görüntü oluşturmak istiyorsanız, CSS arkaplan resimleri kullanmalısınız. Bu resimler alternatif bir metne ihtiyaç duymazlar ve resim stili için birçok opsiyon sunarlar.

37 img elemanı ve özellikleri <img> elemanı kullanarak resim ekleme çok kolaydır: göstermek istediğiniz resmin yerini (yolunu), src (source/kaynak) özelliğinin içine eklersiniz. Aşağıdaki HTML dökümanı web tarayıcınızda balconyview.jpg isimli resmi gösterir. (Resim, HTML dosyanızla aynı klasörde bulunur) <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>example of an inline image</title> </head> <body> <img src="balconyview.jpg"> </body> </html> Bu sayfayı yazarak web tarayıcınızda açarsanız, Şekil 1 deki çıktıyı elde edersiniz. Şekil 1: web tarayıcıda gösterilen resim. alt özelliğini kullanarak metin alternatifi sağlama Bu özellik, resme bazı sebeplerden dolayı ulaşılamazsa bunu belirten bir metin içerir. Resme ulaşılamayabilir çünkü resim bulunamayabilir, yüklenemeyebilir yada kullanıcının tarayıcısı

38 desteklemeyebilir. Buna ek olarak, görme zayıflığı olan insanlar web sayfalarını okumak için yardımcı teknolojiler kullanırlar. Bu teknolojiler <img> elemanının alt özelliğinin içeriğini kullanıcılarına okurlar. Bu yüzden güzel bir alternatif metin yazmak ve alt özelliğinin içerisine eklemek, resmin içeriğini anlatması açısından çok önemlidir. Resmin herkes tarafından anlaşılabilir olması için uygun bir alternatif metin eklemelisiniz. Örneğin, Balkonumdan bir görünüm, bir dizi evi, ağaçları ve kuleleri gösteriyor : <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>example of an inline image</title> </head> <body> <img src="balconyview.jpg" alt="view from my balcony, showing a row of houses, trees and a castle"> </body> </html> alt özelliği, resme ulaşılamadığı zaman gösterilmesi gereken metni gösterir. Resim ulaşılabilir olduğunda bu metnin görünmemesi gerekir ancak Internet Explorer bunu yanlış yapar ve farenizle resmin üzerine geldiğinizde bunu araç ipucu (tooltip-araç bilgisi) olarak gösterir. Bu bir hatadır. Eğer ek bir bilgi göstermek isterseniz title özelliğini kullanmanız gerekir. title özelliği kullanarak gerekli-bilgi ekleme Birçok tarayıcı, fare ile resmin üzerinde gezinildiği zaman <img> elemanının title özelliğinin içeriğini araç bilgisi olarak gösterir. (Şekil 2 ye bakınız). Bu, ziyaretçinin daha fazla bilgi edinmesini sağlar, fakat tüm ziyaretçiler fareye sahip olmayabilir. title özelliği çok faydalı olabilir ancak önemli bilgilerin tedariği için güvenli olmayabilir. O yüzden burada çok önemli olmayan bilgiler yazmalıdır, örneğin ekranda neler olduğu yada neler içerdiği gibi bilgiler olabilir. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>example of an inline image with alternative text and title</title> </head> <body> <img src="balconyview.jpg" alt="view from my balcony, showing a row of houses, trees and a castle" title="what I see when I look out of my window; the castle was one reason to move there."> </body> </html>

39 Bu kodu yazıp web tarayıcınızda açarsanız, Şekil 2 deki çıktıyı elde edersiniz. Şekil 2: title özelliği birçok tarayıcıda araç bilgisi olarak gösterilir. Karmaşık resimler için longdesc kullanrak alternetif temini Eğer resim grafik çok karışık bir görüntüyse, longdesc özelliğini kullanabilirsiniz. Böylece kullanıcılar, resmin anlatmak istediği bilgiye erişebilirler. Bu özellik aynı bilgiyi içeren dokümana işaret eden bir URL içerir. Örneğin, bir küme veri içeren bir grafiğiniz varsa, aynı bilgiyi içeren bir veri tablosuna <longdesc> kullanarak bağlayabilirsiniz. <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>example of an inline image with longdesc</title> </head> <body> <img src="chart.png" width="450" height="150" alt="chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </body> </html> Veri dosyası fruitconsumption.html, aynı veriyi gösteren çok basit bir veri tablosu içerir: <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8">

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm HTML 2. Bölüm Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com (Son Güncelleme: 18.02.2015) Dersin Course Page: www.ismailkaras.com/228 HTML ile Metin Biçimlendirme / Styles - Formatting

Detaylı

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) Ele Alınacak Başlıklar HTML tarihçesi Bir HTML dökümanın genel görünümü HTML ve tarayıcı etkileşimi Tarihçe Internet The World Wide Web (www) HTML URI/URL HTTP Tim Berners-Lee

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 Ders- 13 World Wide Web (WWW) Yrd. Doç. Dr. Burcu Can Buğlalılar Bilgisayar Mühendisliği Bölümü Bilgisayar Katmanları İçerik World Wide Web (WWW) Anlık Mesajlaşma

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

Html temelleri. Ders 4

Html temelleri. Ders 4 Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

HTML Sayfaları. Bütün html sayfaları

HTML Sayfaları. Bütün html sayfaları HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı

Detaylı

www.wikispaces.com Kullanım Kılavuzu

www.wikispaces.com Kullanım Kılavuzu www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

EndNote Web Hızlı Başvuru kartı

EndNote Web Hızlı Başvuru kartı EndNote Web Hızlı Başvuru kartı THOMSON SCIENTIFIC Web öğrencilere ve araştırmacılara çalışmalarını yazarken yardımcı olacak şekilde tasarlanmış Web tabanlı bir servistir. ISI Web of Knowledge, EndNote,

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

Cite While You Write özelliği

Cite While You Write özelliği ResearchSoftware.com 1 Cite While You Write özelliği Atıflar & Şekiller Ekleme EndNote, makalelerinizi yayımcılara elektronik olarak sunmanızı kolaylaştıran daha önceden tanımlanmış birçok Microsoft Word

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için

Detaylı

MEBİS Kullanım Kılavuzu. Öğretim Elemanı Yeni. 2013-2015 - İstanbul Medipol Üniversitesi

MEBİS Kullanım Kılavuzu. Öğretim Elemanı Yeni. 2013-2015 - İstanbul Medipol Üniversitesi MEBİS Kullanım Kılavuzu Öğretim Elemanı Yeni 2013-2015 - İstanbul Medipol Üniversitesi İçindekiler 1. Uzem 1. Uzem mebis.medipol.edu.tr adresine girdiğinizde sol alt tarafta bulunan seçeneklerden "Muzem

Detaylı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

İNTERNET PROGRAMLAMA II. Tanımlar

İNTERNET PROGRAMLAMA II. Tanımlar İNTERNET PROGRAMLAMA II Tanımlar WWW( World Wide Web) Dünya üzerindeki bütün bilgisayarların bağlı olduğu bir ağdır. Çoğunlukla Web olarak adlandırılır. Web üzerindeki bilgisayarlar standart protokolleri

Detaylı

Web Teknolojileri ve Programla

Web Teknolojileri ve Programla 12.05.2010 Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+ da örnekler Web Teknolojileri ve Programla Bölüm

Detaylı

2. Belgeye Metin Ekleme

2. Belgeye Metin Ekleme METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya

Detaylı

Kullanıcı Kılavuzu. Temel Arama. help.ebsco.com

Kullanıcı Kılavuzu. Temel Arama. help.ebsco.com Kullanıcı Kılavuzu Temel Arama help.ebsco.com EBSCOhost lider bilgi sağlayıcılarından derlenmiş çeşitli tam metin ve popüler veri tabanları sunan güçlü bir danışma aracıdır. Bu kullanıcı kılavuzunda, EBSCOhost

Detaylı

Kullanım Kılavuzu Ekim 2017

Kullanım Kılavuzu Ekim 2017 Kullanım Kılavuzu Ekim 2017 İçindekiler 1 Giriş... 3 1.1... Genel Bilgiler... 3 1.2... Üyelik Ekranı... 3 2 Dil Seçimi... 7 3 Doküman Yükleme Ekranı... 8 3.1... Öğrenci... 8 3.2... Akademisyen... 9 4 Rapor

Detaylı

Flow Kullanım Klavuzu Mart 2014

Flow Kullanım Klavuzu Mart 2014 Flow Kullanım Klavuzu Mart 2014 İçindekiler Flow nedir? Bir Flow hesabı oluşturmak Oturum açmak Flow Hesabınız Genel Görünüm Flow Hesabınız Kullanım + Add (ekle butonu) Bibliography (Künye/Atıf butonu)

Detaylı

Arama Sonuçlarında Üst Sıralarda Olmak. Temel SEO Çalışması

Arama Sonuçlarında Üst Sıralarda Olmak. Temel SEO Çalışması Arama Sonuçlarında Üst Sıralarda Olmak Temel SEO Çalışması 2 SEO (Search engine optimization), kısaltmasıdır. Arama motorları SEO işlemleri ile web sitelerini daha kolay bir şekilde taraması için yapılan

Detaylı

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Her doktorun ihtiyacı olan doktor web sitesi, hasta ve doktor arasındaki

Detaylı

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU Üniversitemiz Webmail servisi yenilenmiş olup Roundcube webmail üzerinden servis vermeye başlamıştır. Daha önce kullanılan SquirrelMail servisi https://oldwebmail.cankaya.edu.tr/

Detaylı

duralbend.com Web Sayfasının Seo Analiz Raporu

duralbend.com Web Sayfasının Seo Analiz Raporu duralbend.com Web Sayfasının Seo Analiz Raporu Seo Rapor Tarihi 19 Şubat 2019 Saat: 13:51 PM Seo Puanı 58/100 Temel SEO İçeriği Site Başlığı (Title) DuralBend Tube Processing Machines Karakter Sayısı :

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

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

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

Google Scripts. Neticaret Sistemine Google Analytics ve AdWords sistemleriyle ilgili 3 yeni parametre eklenmiştir.

Google Scripts. Neticaret Sistemine Google Analytics ve AdWords sistemleriyle ilgili 3 yeni parametre eklenmiştir. Google Scripts Neticaret Sistemine Google Analytics ve AdWords sistemleriyle ilgili 3 yeni parametre eklenmiştir. Yeni eklenen paremetrelere Neticaret Sistemi Yönetimi Paneli > Tanımlar bölümü altında

Detaylı

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler

Detaylı

Kullanım Kılavuzu Ekim 2017

Kullanım Kılavuzu Ekim 2017 Kullanım Kılavuzu Ekim 2017 İçindekiler 1 Giriş... 3 1.1... Genel Bilgiler... 3 1.2... Üyelik Ekranı... 3 2 Dil Seçimi... 7 3 Doküman Yükleme Ekranı... 8 3.1... Öğrenci... 8 3.2... Akademisyen... 9 4 Rapor

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın: HTML nedir? HTML e GİRİŞ E. Fatih Yetkin HTML Hyper Text Markup Language kısaltmasıdır. Bir HTML dosyası, çeşitli işaretleme etiketleri içeren bir metin dosyasıdır. Bu işaretleme etiketleri (markup tags)

Detaylı

Metin İşlemleri, Semboller

Metin İşlemleri, Semboller Ankara Üniversitesi Nallıhan Meslek Yüksekokulu Metin İşlemleri, Semboller NBP108 - GRAFİK ANİMASYON il Öğr.Gör. Salih ERDURUCAN 1 / 13 3. METİN İŞLEMLERİ 3.1. Metin Aracı Animasyon yazılımı yazı yazmak

Detaylı

WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)

WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page) WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page) WEB KULLANICI KONTROLLERİ Kullanıcı kontrolleri bir içeriğin birden fazla sayfada kullanılmasına olanak sağlar. Bir web sayfasına eklenerek içerik

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr HTML (HyperText Markup Language) Web sayfaları hazırlamak

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 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

Detaylı

5-Hafta Genel Sayfa Yapısı

5-Hafta Genel Sayfa Yapısı 5-Hafta Genel Sayfa Yapısı Paragraf Oluşturma Metin Biçimlendirme Referans ve Alıntıların Belirlenmesi Metinlerin Vurgulanması Kısaltma ve Terimlerin Belirtilmesi Alt ve Üst Simge Kullanımı Uİ-UX NEDİR?

Detaylı

Mart 31, Google News Kaydı. by

Mart 31, Google News Kaydı. by www.anasayfa.xyz Mart 31, 2016 Google News Kaydı by www.anasayfa.xyz Google News sisteminin gücünü bütün SEO cular olarak bilmekteyiz. Peki bu çok güçlü olan ağa nasıl sitemizi kaydettirebiliriz? Piyasa

Detaylı

Hızlı Başlangıç Kılavuzu

Hızlı Başlangıç Kılavuzu Hızlı Başlangıç Kılavuzu Microsoft Publisher 2013 önceki sürümlerden farklı görünüyor, bu nedenle öğrenmenizi kolaylaştırmak için bu kılavuzu oluşturduk. Hızlı Erişim Araç Çubuğu En sevdiğiniz komutları

Detaylı

Seçenekler Menüsünden Genel Sekmesi

Seçenekler Menüsünden Genel Sekmesi Seçenekler Menüsünden Genel Sekmesi Word 2003 açtıktan sonra ARAÇLAR>SEÇENEKLER tıklanır. Karşımıza bu tür ekran çıkar. İlk komut Arka planda yeniden sayfalandır ; Siz çalışırken belgeleri otomatik olarak

Detaylı

http://bizimguru.com Giriş Arama motorları daha da akıllandıkça, arama motoru optimizasyonu (SEO) da zamanla çok daha kolaylaşmaya başladı. Özellikle Wordpress kullanıcıları için öne çıkan bir SEO eklentisi

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Atlama Menüsü Eklemek:

Detaylı

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Kullanıcı dostu kontrol panelli dünya standartlarında web tasarım uygulaması.

Detaylı

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak MS POWERPOINT 2010 1.Giriş: PowerPoint, Windows ortamında çalışan bir sunu paket programıdır. Metin, taslak, çizim ve grafikler kullanılarak sunular, slaytlar, broşürler, bildiriler, konuşmacı notları

Detaylı

AMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1

AMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 AMACSEO TEMASI KULLANIM KILAVUZU AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 TEMANIN ÖZELLİKLERİ - Wordpress 3.1.1 sürümü için hazırlanmıştır. - Basit kontrol paneli

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Jump Menü-Açılan Menü

Detaylı

ODTÜ BLOG SERVĐSĐ ve BLOG HAZIRLAMA

ODTÜ BLOG SERVĐSĐ ve BLOG HAZIRLAMA Instructional Technology Support Office ODTÜ BLOG SERVĐSĐ ve BLOG HAZIRLAMA Orta Doğu Teknik Üniversitesi Middle East Technical University Đletişim Bilgileri: Web adresi: http://its.metu.edu.tr Adres:

Detaylı

Web Tasarımının Bugünü ve Geleceği

Web Tasarımının Bugünü ve Geleceği Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin

Detaylı

Ecat 8. Hakbim Bilgi İşlem A.Ş. Versiyon

Ecat 8. Hakbim Bilgi İşlem A.Ş. Versiyon Ecat 8 Hakbim Bilgi İşlem A.Ş. Versiyon 2015 01.01 1 Ecat8 Nedir? Firmaların elektronik yedek parça kataloğu ihtiyacını karşılamak için Hakbim Bilgi İşlem tarafından geliştirilmiş ve geliştirilmeye devam

Detaylı

Web Önyüzü Nasıl Olmalı? <Markup> : İskelet {css} : Görünüm JavaScript() : Etkileşim

Web Önyüzü Nasıl Olmalı? <Markup> : İskelet {css} : Görünüm JavaScript() : Etkileşim Web Önyüzü Nasıl Olmalı? : İskelet {css} : Görünüm JavaScript() : Etkileşim Bu üç öğe olabildiğince esnek bağlı olmalı Kötü Örnek / İyi Örnek Standartlara uygun olmalı! Standartlara uygun

Detaylı

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

Detaylı

Çocuklar İçin Web Tasarımı çocuklara yönelik Programlama ve Üç Boyutlu Modelleme Çocuklar İçin Web Tasarımı kopyala yapıştır yöntemini kullanmadan

Çocuklar İçin Web Tasarımı çocuklara yönelik Programlama ve Üç Boyutlu Modelleme Çocuklar İçin Web Tasarımı kopyala yapıştır yöntemini kullanmadan GİRİŞ Doç.Dr. Selçuk ÖZDEMİR in Çocuklar İçin Web Tasarımı kitabını bir kitapçıda görünce merak ettim. Daha sonra kendisinin yine çocuklara yönelik Programlama ve Üç Boyutlu Modelleme kitaplarını fark

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd Tüm haklar mahfuzdur. Bu yayının hiçbir kısmı ECDL Kuruluşundan izin almadan hiçbir şekilde çoğaltılamaz. Çoğaltım talepleri yayıncıya yapılmalıdır. The European Computer Driving Licence Foundation Ltd

Detaylı

Nevşehir Hacı Bektaş Veli Üniversitesi. Moodle Uzaktan Eğitim Sistemi. Öğretim Elemanı Bilgilendirme Kılavuzu

Nevşehir Hacı Bektaş Veli Üniversitesi. Moodle Uzaktan Eğitim Sistemi. Öğretim Elemanı Bilgilendirme Kılavuzu Nevşehir Hacı Bektaş Veli Üniversitesi Moodle Uzaktan Eğitim Sistemi Öğretim Elemanı Bilgilendirme Kılavuzu 1. Moodle Uzaktan Eğitim Sistemine nasıl giriş yapılır? 2. Derse giriş yapma ve yeni bir sanal

Detaylı

Seo Raporu halikoltukyikama.com

Seo Raporu halikoltukyikama.com Seo Raporu halikoltukyikama.com Oluşturulduğu Tarih: 03 Mayıs 2015 05:39 Seo Puanı 42/100 SEO İçeriği Title Helal Halı Yıkama 378 21 21 HELAL HALI YIKAMA Uzunluk : 45 Süper, sayfa başlığınız 10-70 karakter

Detaylı

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu. Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html

Detaylı

Bütün XML dökümanlarının bir kök elemanı olmalıdır. Diğer bütün elemanlar kök elemanı tarafından kapsanır.

Bütün XML dökümanlarının bir kök elemanı olmalıdır. Diğer bütün elemanlar kök elemanı tarafından kapsanır. XML Genişletilebilir İşaretleme Dili (extensible Markup Language), hem insanlar hem bilgi işlem sistemleri tarafından kolayca okunabilecek dokümanlar oluşturmayı sağlamaktadır W3C tarafından tanımlanmış

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

İçindekiler ADIM 1 : Üye Olma... 2 ADIM 2 : Giriş Yap ve Hatırlatma Sayfaları... 3 ADIM 3: Üye Girişi yapıldıktan sonra yapabileceğiniz işlemler...

İçindekiler ADIM 1 : Üye Olma... 2 ADIM 2 : Giriş Yap ve Hatırlatma Sayfaları... 3 ADIM 3: Üye Girişi yapıldıktan sonra yapabileceğiniz işlemler... İçindekiler ADIM 1 : Üye Olma... 2 ADIM 2 : Giriş Yap ve Hatırlatma Sayfaları... 3 ADIM 3: Üye Girişi yapıldıktan sonra yapabileceğiniz işlemler... 3 ADIM 4: Bildiri Özet Gönderimi Bilgilendirme ve Yardım

Detaylı

Microsoft Word 2010 ara yüzündeki bölümler aşağıda gösterilmiştir.

Microsoft Word 2010 ara yüzündeki bölümler aşağıda gösterilmiştir. Başlangıç Bu dersin amacı, öğrencilerin çalışma hayatlarında Microsoft Word programını daha etkili ve verimli kullanmalarını sağlamak ve karşılaştıkları sorunların çözümlerine ulaşma konusunda deneyim

Detaylı

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir?

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir? HTTP & HTML Seval ÖZBALCI Bilgisayar Programcılığı Bölümü Ders 3 HTTP ve HTML Kullanarak İlk Web Sayfasının Oluşturulması BİRİNCİ BÖLÜM HTTP Nedir? HTML Nedir? Temel Unsurlar Editör Türleri İlk Sayfanın

Detaylı

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi GENEL DERS BİLGİLERİ Öğretim Elemanı Ofis : MUH 312 : Öğr. Gör. Dr. T.Tugay BİLGİN Ofis Saatleri : Pazartesi:

Detaylı

TSOFT FACEBOOK STORE UYGULAMASI

TSOFT FACEBOOK STORE UYGULAMASI TSOFT FACEBOOK STORE UYGULAMASI GEREKSİNİMLER VE KURULUM YARDIMI GİRİŞ Facebook, insanların arkadaşlarıyla iletişim kurmasını ve bilgi alış verişi yapmasını amaçlayan bir sosyal paylaşım web sitesidir,

Detaylı

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA TEMEL BİLGİSAYAR Ders Notları Yrd. Doç. Dr. Seyit Okan KARA Pencerenin ortasında bulunan beyaz sayfa, slayt tasarımında kullanacağımız sayfamızdır. Sol panelde bu slayt sayfasının küçültülmüş halde bir

Detaylı

VitalSource Bookshelf Nedir? Bookshelf e Giriş Kayıt Kitap Ekleme. Masaüstü ve Dizüstü Bilgisayarda

VitalSource Bookshelf Nedir? Bookshelf e Giriş Kayıt Kitap Ekleme. Masaüstü ve Dizüstü Bilgisayarda VitalSource Bookshelf Nedir? VitalSource Bookshelf, VitalSource üzerinden temin edilen dijital kitapların kullanıldığı dijital bir platformdur. Bookshelf, kişiye özel dijital kütüphane oluşturarak, kullanıcıların

Detaylı

İNTERNET PROGRAMCILIĞI - II

İNTERNET PROGRAMCILIĞI - II 0 İÇİNDEKİLER Bölüm 1 PHP İle Web Programlamaya Giriş 1 Bölüm 2 PHP Kodlama Standartları 5 Bölüm 3 PHP Değişken Kullanımı 17 Bölüm 4 IF Yapısı 32 Bölüm 5 Döngüler ve Diziler 64 1 BÖLÜM 1 PHP İLE WEB PROGRAMLAMAYA

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ

1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ 1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ 6 1.1 Frontpage 2003 ün açılması Frontpage 2003 ü çalıştırabilmek için Başlat/Programlar/ Microsoft Office Microsoft Office Frontpage 2003 yolu izlenir. FrontPage 2003,

Detaylı

AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı

AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı Emre GÜLCAN IT Responsible & Web Admin AEGEE-Eskişehir emregulcan@gmail.com e_gulcan@hotmail.com 0535 729 55 20 1 1. YÖNETİM PANELİNE

Detaylı

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. 1. HTML NEDİR? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz bu

Detaylı

5.Slayt ana hat görünümü 6.Görev bölmesi penceresi 7.Not alanı 8.Durum çubuğu

5.Slayt ana hat görünümü 6.Görev bölmesi penceresi 7.Not alanı 8.Durum çubuğu MS POWERPOINT 2010 PowerPoint, Windows ortamında çalışan bir sunu paket programıdır. Metin, taslak, çizim ve grafikler kullanılarak sunular, slaytlar, broşürler, bildiriler, konuşmacı notları ve taslaklar

Detaylı

Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için:

Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için: Biçimleme Metin biçimleme Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için: 1. Hizalamak istediğiniz metni seçin. 2. Giriş sekmesini

Detaylı

Webdepo Uygulaması Son Kullanıcı Dokümanı

Webdepo Uygulaması Son Kullanıcı Dokümanı Webdepo Uygulaması Son Kullanıcı Dokümanı Meryem Yavaş Boyut Ltd. Şti Temmuz 2008 Özet : Bu doküman, Selçuk Ecza Deposu web depo uygulaması hakkında bilgi vermek amacıyla hazırlanmıştır. Web depo uygulamasının

Detaylı

Microsoft Office Publisher 2016

Microsoft Office Publisher 2016 Microsoft Office Publisher 2016 Publisher 2016 Publisher görsel açıdan zengin, profesyonel görünümlü yayınlar oluşturmanıza yardımcı olan bir masaüstü yayımcılık uygulamasıdır. Bilgisayarınızda Publisher'la

Detaylı

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA Google Docs yani Google Dokümanlar hizmeti bir süre önce Google Drive adlı bulut depolama hizmetinin içerisine alındı ve çok daha gelişerek yoluna devam etti. Google

Detaylı