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ı (http://www.w3.org/tr/html401/index/ attributes.html) ile belirlenmiştir. Yine html hakkında ayrıntılı bilgiyi ve kullanım bilgilerini w3schools (http://www.w3schools.com) 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" "http://www.w3.org/tr/html4/ 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" "http://www.w3.org/tr/html4/loose.dtd> 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 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" "http://www.w3.org/tr/html4/frameset.dtd">

8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> 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="http://dailypuppy.com" 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="http://dailypuppy.com" 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="http://dailypuppy.com" 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="http://www.wait-till-i.com/feed/"> <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="http://www.w3.org/tr/html401/"> <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="http:// 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ı

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ı

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 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ı

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ı

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ı

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ı

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ı

12. Tanımlama Listeleri
,
,

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ı

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ı

İ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ı

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ı

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ı

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ı

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ı

İ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ı

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ı

Ç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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

Web Önyüzü Nasıl Olmalı? : İ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ı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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

Hızlı Başlangıç Kılavuzu Hızlı Başlangıç Kılavuzu Microsoft Visio 2013 önceki sürümlerden farklı görünüyor, bu nedenle öğrenmenizi kolaylaştırmak için bu kılavuzu oluşturduk. Güncelleştirilmiş şablonlar Şablonlar, istediğiniz

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ı

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ı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

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ı

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ı

KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU

KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU YENİ TASARIM KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU WYS : WEB YÖNETİM SİSTEMİ Wys yetkili olduğumuz birimin web sayfası ile ilgili her

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ı

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ı

Araç Karşılaştırma Programı

Araç Karşılaştırma Programı 1 Araç Karşılaştırma Programı Sık Sorulan Sorular 01 Ocak 2015 2 Konu: Genel 1. Soru: Sistemdeki bilgiler nereden geliyor? Cevap: Görüntüleme ve karşılaştırma yapılan programda yer alan tüm bilgiler (sonuç

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ı

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ı

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ı

ASP.NET ile Bir Web Sitesi Oluşturma

ASP.NET ile Bir Web Sitesi Oluşturma 29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site

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ı

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ı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...

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ı

13 Aralık 2007. Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL. Đlgili Modül/ler : Raporlar. Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz

13 Aralık 2007. Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL. Đlgili Modül/ler : Raporlar. Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz 13 Aralık 2007 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : Raporlar KULLANICI TANIMLI RAPORLAR Kullanıcı Tanımlı Raporlar Bölümünden Yapabildiklerimiz Kendi isteklerinize özel rapor tasarımları

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ı

Açılan programın pencere görünümü aşağıdaki gibidir. 2. Araç Çubuğundan kaydet düğmesi ile

Açılan programın pencere görünümü aşağıdaki gibidir. 2. Araç Çubuğundan kaydet düğmesi ile POWERPOINT PROGRAMI Powerpoint bir sunu hazırlama programıdır. Belirli bir konu hakkında bilgi vermek için, derslerle ilgili bir etkinlik hazırlamak için, dinleyicilere görsel ortamda sunum yapmak için

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ı

Microsoft PowerPoint

Microsoft PowerPoint Microsoft PowerPoint GİRİŞ Microsoft Powerpoint bir sunum hazırlama programıdır. Microsoft Powerpoint sayesinde sunumlarınıza içerisinde ses,video,animasyon,grafik,resim,köprüler,web içerikleri ve çeşitli

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

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 PowerPoint. Slayt Hazırlama. Nilgün Çokça

Microsoft PowerPoint. Slayt Hazırlama. Nilgün Çokça Microsoft PowerPoint Slayt Hazırlama Nilgün Çokça Microsoft PowerPoint İçindekiler Microsoft PowerPoint... 3 Slayt Açma... 3 İkinci Slayt Ekleme... 3 Slayt Düzeni... 4 Resim ya da Obje Ekleme... 6 Slayt

Detaylı

Dersin Konusu ve Amaçları: Ders P lanı: Bölüm 1: Bilgi Teknolojilerinde Temel Kavramlar

Dersin Konusu ve Amaçları: Ders P lanı: Bölüm 1: Bilgi Teknolojilerinde Temel Kavramlar Bilgi Teknolojileri ve Uygulamalarına Giriş Dersin Konusu ve Amaçları: Bu dersin amacı daha önce bilgisayar ve bilgi teknolojileri alanında herhangi bir bilgi ve/veya deneyime sahip olmayan öğrenciye bilgi

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ı

Video Hazırlama Programı ile Öğretim Materyali Oluşturulması

Video Hazırlama Programı ile Öğretim Materyali Oluşturulması Öğretim Teknolojileri Destek Ofisi Instructional Technology Support Office Video Hazırlama Programı ile Öğretim Materyali Oluşturulması Orta Doğu Teknik Üniversitesi Middle East Technical University İletişim

Detaylı

Website Yorumu seoniva.com

Website Yorumu seoniva.com Website Yorumu seoniva.com Oluşturma Tarihi Ağustos 17 2015 22:08 PM Seo Skoru54/100 SEO İçeriği Başlık Profesyonel SEO Danışmanlığı - SEO'da Uzman Çözüm! Uzunluk : 55 Mükemmel, site başlığınız 10

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ı

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ı

Kelime işlemcilerin işlevlerini öğrenmek. Başlıca kelime işlemcileri tanımak. Microsoft Word 2010 programı hakkında temel bilgileri öğrenmek.

Kelime işlemcilerin işlevlerini öğrenmek. Başlıca kelime işlemcileri tanımak. Microsoft Word 2010 programı hakkında temel bilgileri öğrenmek. Amaçlarımız 2 Kelime işlemcilerin işlevlerini öğrenmek. Başlıca kelime işlemcileri tanımak. programı hakkında temel bilgileri öğrenmek. da metin biçimlendirmek. 1 Kelime İşlemcilerin İşlevleri 3 Kelime

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ı

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU T.C. SÜLEYMAN DEMİREL ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU Hazırlayanlar Mahmut ÖZDEMİR Sezgin SERPEN Büşra TUNCER Yönetim Paneli Kullanımı Sistemin yönetim

Detaylı

C# ile e-posta Göndermek

C# ile e-posta Göndermek Kemal Demir http://kemal.csharpturk.net kemal@csharpturk.net C# ile e-posta Göndermek 25.12.2006 Web sitemizin üyelerine ya da adreslerini bir yerde biriktirdiğimiz arkadaşlarımıza toplu olarak eposta

Detaylı

08.11.2015 WORD KULLANIMI

08.11.2015 WORD KULLANIMI KELİME İŞLEMCİ-MİCROSOFT OFFİCE OFFICE DÜĞMESİ HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER ŞEKİL, RESİM EKLEME TABLO EKLEME ETKİNLİKLER 1 OFFICE DÜĞMESİ: Çalışmamız ile ilgili dosya işlemleri yapmamızı sağlar. Yeni

Detaylı

BAROLAR WEB SİTESİ EĞİTİMİ

BAROLAR WEB SİTESİ EĞİTİMİ BAROLAR WEB SİTESİ EĞİTİMİ HAZIRLAYAN HÜSEYİN SARI 23 MART 2011 ANKARA - İÇERİK YÖNETİM PANELİ - İÇERİK EKLEME İçerik eklerken öncelikle içeriği hangi kayıt tipinde ekleleyeceğimizi belirliyoruz. Tarih

Detaylı

Kullanıcı Kılavuzu Türk İşaret Dili (TİD) Web Sayfası Projesi. Ayça Kundak Cem Altel Didem Gözüpek M.Sadullah Ceran Metin Döşlü Seher Göğebakan

Kullanıcı Kılavuzu Türk İşaret Dili (TİD) Web Sayfası Projesi. Ayça Kundak Cem Altel Didem Gözüpek M.Sadullah Ceran Metin Döşlü Seher Göğebakan Kullanıcı Kılavuzu Türk İşaret Dili (TİD) Web Sayfası Projesi Ayça Kundak Cem Altel Didem Gözüpek M.Sadullah Ceran Metin Döşlü Seher Göğebakan Table of Contents 1. GİRİŞ... 3 1.1 Amaç... 3 1.2 Kapsam...

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ı

GELİŞMİŞ İNTERNET UYGULAMALARI

GELİŞMİŞ İNTERNET UYGULAMALARI Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

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ı

MASTER PAGE SAYFASI KULLANIMI

MASTER PAGE SAYFASI KULLANIMI MASTER PAGE SAYFASI KULLANIMI Hazırladığımız Web sayfalarında sayfanın belli bölgelerinin sürekli sabit kalmasını istiyorsak ve bazı kısımlarının değişmesini istiyorsak Master Page Sayfası kullanırız.

Detaylı

Seo Raporu istanbuldiyet.com

Seo Raporu istanbuldiyet.com Seo Raporu istanbuldiyet.com Oluşturulduğu Tarih: 30 Ekim 2015 01:41 Seo Puanı 62/100 SEO İçeriği Title Yunus KAPAR Diyet Diyetisyen istanbul Diyet Online Diyet Uzunluk : 64 Süper, sayfa başlığınız 10-70

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim

Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim Görme Engelli Görme engelli kime denir? Demografik yapıdaki yerleri ve veriler Dünyadaki durum Türkiye deki

Detaylı

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir.

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Sayfa numarası ekleme: Ekle menüsünden sayfa numaraları seçeneğine tıklandığında Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Tarih ve saat ekleme: Ekle menüsünden Tarih

Detaylı

Prezi kullanım hatırlatmaları

Prezi kullanım hatırlatmaları Prezi kullanım hatırlatmaları Prezi bize daha ilgi çekici sunumları hazırlama olanağı sunan çevrimiçi bir araç. edu uzantılı e-posta adresiyle alınan üyelikler daha kapsamlı özelliklere sahip. Hesabımızı

Detaylı

PHP I PHP I. E. Fatih Yetkin. 26 Eylül 2011

PHP I PHP I. E. Fatih Yetkin. 26 Eylül 2011 PHP I E. Fatih Yetkin 26 Eylül 2011 Outline Temel Tanımlar HTML e Giriş PHP ye Giriş MySQL ve PHP Temel Tanımlar Web Sunucu Nedir? Teknik detaylar bir kenara bırakılacak olursa, hazırlanan web sayfasını

Detaylı

E-postalarınıza HTML imza ile daha ilgi çekici olun

E-postalarınıza HTML imza ile daha ilgi çekici olun E-postalarınıza HTML imza ile daha ilgi çekici olun 3 Temmuz Cuma 09 Diğer Dökümanlar http://mfyz.com/e-postalariniza-html-imza-ile-daha-ilgi-cekici-olun E-Postalarda imza kullanımı Günümüzde eposta ile

Detaylı

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER 1.WEB PANELE GİRİŞ www.okuladı.meb.k12.tr/mebpanel Resim1: Okul Web Siteleri Yönetim Paneli [MebWeb] Giriş Ekranı AÇIKLAMA: Okulunuzun web

Detaylı

Çözüm Bilgisayar. Çözüm İntSite

Çözüm Bilgisayar. Çözüm İntSite Çözüm Bilgisayar Çözüm İntSite Çözüm İnternet Site Programı (intsite.exe) Firmamızca geliştirilen ve Çözüm HBYS programının ana modülü olan Hasta Takip modülünü kullanan tüm hastanelerin kullanabileceği

Detaylı

E-Posta Hesabı Oluşturma

E-Posta Hesabı Oluşturma E-Posta Hesabı Oluşturma Elektronik Posta (E-posta) Nedir? Elektronik posta (e-posta) internet ortamından gönderilen dijital (elektronik) mektuptur. Bir başkasına e-posta gönderebilmemiz için öncelikle

Detaylı

Detaylarıyla Site İçi SEO

Detaylarıyla Site İçi SEO Detaylarıyla Site İçi SEO Merhabalar, Bu E-Kitap ta Google ve ziyaretçiler tarafından üst düzey bir öneme sahip olan, bir web sitesi için kurgulanması gereken tasarımsal, içeriksel ve kodsal site içi SEO

Detaylı

TecCom TecLocal Programı Kurulum ve Yapılandırma Rehberi

TecCom TecLocal Programı Kurulum ve Yapılandırma Rehberi TecCom TecLocal Programı Kurulum ve Yapılandırma Rehberi Giriş: TecLocal programı TecCom elektronik ticaret platformu üzerinden sisteme kayıtlı tedarikçi/distribütör firmalara bağlanmayı sağlayan ücretsiz

Detaylı

VKV Koç Özel İlkokulu, Ortaokulu ve Lisesi. K12Net Veli Yardım Kılavuzu

VKV Koç Özel İlkokulu, Ortaokulu ve Lisesi. K12Net Veli Yardım Kılavuzu VKV Koç Özel İlkokulu, Ortaokulu ve Lisesi KNet Veli Yardım Kılavuzu KNet e Erişim KNet Erişim Bilgilerini Güncelleme KNet te Öğrenci Bilgilerini Görüntüleme KNet Ekran Ara Yüzünü Özelleştirme KNet te

Detaylı

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Semboller, Ses Ekleme, Video Ekleme Orta Doğu Teknik Üniversitesi

Detaylı

MS WORD 6. BÖLÜM. Başvurular sekmesindeki seçenekler Şekil 3.127 de görülmektedir. Şekil 3. 127. Başvurular Sekmesi

MS WORD 6. BÖLÜM. Başvurular sekmesindeki seçenekler Şekil 3.127 de görülmektedir. Şekil 3. 127. Başvurular Sekmesi MS WORD 6. BÖLÜM Bölüm Adı: BAŞVURULAR Bölümün Amacı: Başvurular sekmesini kullanmak. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Belgeye içindekiler tablosu oluşturabilir. 2. Belge içinde dipnot

Detaylı

http://www.mikrobilgi.com.tr

http://www.mikrobilgi.com.tr IEEE Xplore KULLANIM KILAVUZU ieee@mikrobilgi.com.tr http://www.mikrobilgi.com.tr IEEE Xplore Ana Sayfa Login eğer gerekiyorsa kullanıcı adı ve şifre ile giriş yapınız. Alert; favori dergilerin içerik

Detaylı