İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı

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

Download "İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı"

Transkript

1 İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı Web Programcılığı Dalı HTML, XHTML, CSS

2 HTML HTML Nedir? HTML Web sayfalarının kullandığı dildir. HTML bir programlama dili değildir. HTML bir işaretleme dilidir. Web ortamında içeriğin nasıl biçimleneceğini tanımlayan bir görsel düzenleme dilidir. Web sayfalarının temeli HTML dosyalarıdır. ( HTML Documents = Web Pages ) HTML Hyper Text Markup Language Markup Language İşaretleme (Betik) dili. Web tasarımın yapı taşı HTML'dir. İnternet üzerinde bulunan tüm sayfaların kaynakları HTML'dir. HTML Online Kaynaklar: Yazım kuralları: Komutlar büyük ya da küçük harfle yazılabilir. Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez. Komutlar < ve > işaretleri arasında yazılır ve tag (etiket) adını alır. 2

3 ...Kullanım biçimi: < etiket adı > Ör) <html>, <body>, <title> Bir etiket <etiket adı> şeklinde başlar ve bazı etiketler dışında </etiket adı> şeklinde biter. Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır. Kullanım biçimi: <tag1> <tag2>... </tag2> </tag1> Örnek: <HTML> <BODY>... <FORM>... 3

4 </FORM> </BODY> </HTML> Bir etiket, parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak (" ") işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır. Kullanım biçimi: <etiket_adı parametre_adı ="değer"> Örnek: <body bgcolor="blue"> WEB sayfasında standart olarak bulunması gere ken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla; tarayıcı ilgili dosyanın bir WEB sayfası olduğunu anlar ve ona göre görüntüler. <html> <head> <title> Sayfanın Başlığı </title> </head> <body>... Sayfanızın tüm içeriği: resim, yazı, video, vb.... </body> </html> 4

5 HTML Sayfasının Bölümleri <HTML> Bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur. <html> </html> <HEAD> HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Sayfa çalıştığında Web Tarayıcının başlık çubuğunda görülecek yazı burada : <title>... </title> etiketleri arasında belirtilir. Güzel ve başarılı bir sayfa oluşturmak istiyorsak <head> içerisinde META etiketlerini kullanarak bir takım tanımlamalar yapmalıyız. META etiketleri Tarayıcıda içerik olarak gözükmez, sadece sayfa hakkında tanımlayıcı bilgiler içerir. META etiketinde kullanılan parametreler şunlardır: 5

6 NAME: Author, description veya keywords gibi anahtar değerler alır ve sayfa hakkında tanımlayıcı bilgiler içerir. HTTP-EQUIV: Refresh, expires, content, content-style-type gibi sayfanın ilk yüklenmesi sırasında yapılacak bir takım ayarları içerir. Bazı META etiketleri ve kullanımları: <META NAME="author" CONTENT="EMEL KAÇAR"> Sayfanın tasarımcı kimliğini gösterir. <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> <META NAME="siteinfo" CONTENT="Site Hakkında Bilgi"> Arama motorlarında çıkacak olan açıklama satırı. <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Arama motorları tarafından hangi anahtar kelimelerle sayfanın aranacağını belirtir. <META http-equiv="refresh" CONTENT="5; URL=http://www.megep.meg.gov.tr"> Belirli bir saniye sonra sayfa istenilen adrese 6

7 otomatik yönlendirilir. Yukarıdaki örnekte 5 saniye. <meta http-equiv="refresh" content="60"> Belli aralıklarla sayfanın yenilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir. <META http-equiv="expires" CONTENT="Wed, 25 Feb :00:00 GMT"> Sayfanın geçerli olduğu zamanı belirler. Eğer sayfanız belli bir zaman içinde görüntülenecek bir sayfa ise bu tagı kullanmanız gerekir. Expires GMT saat sistemine göre belirtilen saat ve tarihten sonra sayfa arama motorlarından ve browser'ların geçici belleklerinden silinecektir. <META http-equiv="content-type" CONTENT="text/html; charset=windows-1254"> <META http-equiv="content-type" CONTENT="text/html; charset=iso "> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama ile yapıldığını gösterir. (windows-1254 ve ISO Türkçe karakter kodlamasını belirtir) <META http-equiv="content-language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe (istenirse değiştirile 7

8 bilir.) olduğunu gösterir. <META http-equiv= content-style-type CONTENT= text/css > Content-style-type belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir. <META NAME="copyright" CONTENT=" 2006 EMEL KAÇAR"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir. <META NAME="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu sayfanın hangi editörle yapıldığını gösterir. <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"> Kodu sayfanızı arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir. Virgülün solundaki ifade sayfanın indekslenip indekslenmeyeceğine karar verilmesini sağlarken, sağındaki ifade sayfadaki linklerin takip edilip edilmeyeceğini belirtiyor. index (indeksle) ve noindex (indeksleme) follow (takip et), nofollow (takip etme) <meta name="robots" content="none"> <meta name="robots" content="index,follow"> <meta name="robots" content="noindex,follow"> 8

9 <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow"> gibi kullanımları mevcuttur. <META http-equiv="pragma" content="no-cache"> <META HTTP-EQUIV="cache-control" CONTENT="nocache"> Arama motorlarına sayfayı arşivlememe direktifi verilir. <META NAME="revisit-after" CONTENT="1"> Sayfanın arama motorları tarafından kaç günde bir ziyaret edilmesi gerektiği belirtilmiş olur. <meta name="revised" content="maxiasp, 2/9/01"> Sitenizin son yenilenme tarihini de <META> etiketi ile belirtebilirsiniz. Bu arama motorlarında işe yarayacak bir özelliktir. Ayrıca site değerlendirme araçları da bu gibi kodlara önem verir. <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur. Örnek) Şimdi bu tagları örnek bir sayfada görelim. Sayfa hakkında : 9

10 Ormanlar hakkında bilgi veren bir sayfa, Hazırlayan Erol Cebeci, Girişte yeşil bir dünya sloganı olan bir sayfa, Son gösterileceği tarihin 31 Ocak 2008 gece yarısı, Bilgilerinin elimizde olduğunu varsayalım. Buna göre sayfamızın meta taglarını hazırlayalım. <html> <head> <title> Ormanlar ile yeşil bir dünya </title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="description" content="oksijen kaynağımız ormanları koruyalım ve tanıyalım."> <meta name="keywords" content="orman, ağaç, yeşil bir dünya, doğa, hayat, gelecek, oksijen, sağlık, çam, koru"> <meta name="author" content="erol Cebeci"> <meta http-equiv="expires" content="wed,31 January :59:59 gmt"> <meta http-equiv="refresh" content="10, url=http://deneme.com"> </head> <body bgcolor="green"> sayfayı tanımlama kodları </body> </html> 10

11 Robot.txt Dosyası Bu dosya web sayfasının kök dizininde bulunur. Arama motorlarının indeksleme robotları bir web sitesine ulaştıklarında ilk olarak kök dizinde bulunan robots.txt dosyasını ararlar. Bu dosya robotlara hangi sayfaların indekslenip hangilerinin indekslenmeyeceğini anlatmak için yerleştirilir. Robotlar sadece kök dizindeki robots.txt dosyasına bakacakları için alt dizinlere bu dosyayı yerleştir mek anlamsızdır. Eğer alt dizinlerden birisine ait url (veya url lerin) indekslenmesini istemiyorsanız bunlar da kök dizindeki robots.txt dosyasında bildirmeniz gerekiyor. Ya da alternatif olarak indekslenmesini istemediğiniz sayfalarda meta tag kullanabilirsiniz. Örnek bir robots.txt dosyasının içeriği: User-Agent: * Disallow: /wp/wp-content/ Sitemap: robots.txt dosyası sadece belirli bir şekilde düzenlenmiş metin içeriğine sahip olmalıdır ve asla HTML kodları içermemelidir. Hatalı robots.txt dosyaları, robotlar tarafından dikkate alınmayacaklardır. Bu konuyla ilgili kaynak: 11

12 Tüm robotların blog unuzun tamamını indekslemesini engellemek için; User-agent: * Disallow: / Blog unuzun tamamının robotların birisi tarafından indekslenmesini engellemek için; User-agent: Googlebot Disallow: / User-agent: * Disallow: Tüm robotların blog unuzun tamamını indekslemesi için; User-agent: * Disallow: Not: Boş bir robots.txt dosyası da aynı mesajı verecektir. Bir dizinin tüm robotlar tarafından indekslenmesini engellemek için; User-agent: * Disallow: /dizin-adi/ Bir sayfanın tüm robotlar tarafından indekslenmesini engellemek için; User-agent: * Disallow: /dizin-adi/ozel-sayfa.html 12

13 Robots.txt dosyasında: /dizin-adi/* veya /dizin-adi/*.html gibi ifadeler kullanamazsınız. Hariç tutulmasını istediğiniz sayfaları ve dizinleri teker teker belirtmek zorundasınız. Tabii ki hariç tuttuğunuz bir dizinin içindeki dosyaları ayrıca belirtmenize gerek yok. Örnek bir kod aşağıdaki şekilde olabilir; # için robots.txt dosyası User-agent: * Disallow: /cgi-bin/ Disallow: /images/private/ Disallow: /private.html <BODY> HTML belgesinin gövde kısmıdır. Bütün içerik burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. Kullanılacak parametreler: Bgcolor: Arka plan rengini belirler. Background: Arka planda kullanılmak istenen resmi belirler. Link: Sayfadaki linklerin rengini belirler. Alink: Linke tıklandığındaki rengi belirler. 13

14 Vlink: Daha önce ziyaret edilmiş linklerin rengini belirler. Ör) <HTML> <HEAD> <TITLE> Bu benim ilk sayfam </TITLE> </HEAD> <BODY> Merhaba Dünya! </BODY> </HTML> METİNLER VE BİÇİMLENDİRME Başlık Tag'leri (Headers): (<hx>... </hx>) Bu etiket sayfa içerisinde kullanılacak metinlerin boyutlarını belirtmek için kullanılır. X değeri 1'den 6'ya kadar altı farklı değer alır. X değeri büyüdükçe metin boyutu küçülür. Ör) <html> <head> <title> Başlık Etiketinin Kullanımı </title> </head> <body> <h1> Bu yazı h1 ile yazılmıştır </h1> 14

15 <h2> Bu yazı h2 ile yazılmıştır </h2> <h3> Bu yazı h3 ile yazılmıştır </h3> <h4> Bu yazı h4 ile yazılmıştır </h4> <h5> Bu yazı h5 ile yazılmıştır </h5> <h6> Bu yazı h6 ile yazılmıştır </h6> </body> </html> Paragraf Tag'i: (<p>... </p>) Arasındaki yazıyı ekranda bir paragraf gibi gösterir. Üstünde ve altında birer satır boşluk oluşur. <p> Bu yazı bir paragraftır... </p> <p align= left > Bu paragraf sola hizalı olur</p> <p align= right > Bu paragraf sağa hizalı olur</p> <p align= center > Bu paragraf ortada olur</p> Not:Satır atlamak için ayrıca tekil <br> etiketi kullanılabilir. 15

16 Yazıyı düzenleme etiketleri: HTML iki ayrı biçimlendirme etiketi türü sağlar. İçerik tabanlı ve fiziksel etiketler. İçerik tabanlı biçimlendirme etiketleri; bir metin parçasına, zamanı geldiğinde metnin görüntülenme şeklini de etkileyecek biçimde anlam ya da bağlam eklemek için kullanılır. Diğer yandan fiziksel metin düzenleme etiketleri metin üzerinde bir anlam sağlamazlar ve doğrudan metnin görünümü ile ilgilenirler. => Fiziksel Metin Biçimlendirme Tag'leri: <b> Bu yazı kalın yazılır </b> <u> Bu yazı altı çizgili yazılır </u> <i> Bu yazı eğik yazılır </i> <s> Bu yazının üzeri çizili olur </s> <big> Normalinden daha büyük yazı </big> <small> Normalinden daha küçük yazı </small> <blink> Yanıp sönen yazı </blink> <sub> Alt simge metni </sub> <sup> Üst simge metni </sup> <tt> Metin için tek boşluklu (tüm karakterler aynı genişlikte) yazı-tipini uygular </tt> 16

17 Not: <Small> ve <Big> etiketlerinin üst-üste kullanılması yaptıkları etkiyi artırır. <blink> etiketi tüm tarayıcılar tarafından desteklenmez. => İçerik Tabanlı Metin Biçimlendirme Tag'leri: <em> Metne vurgu ekler </em> Bu yazı eğik yazılır <strong> Metne güçlü vurgu ekler </strong> Bu yazı kalın yazılır <cite> Kaynak alıntı tanımlamak için kullanılır </cite> Bu yazı eğik yazılır 17

18 <code> Tek boşluklu yazı tipi tanımlar </code> Bu yazı tek-boşluklu yazı tipi ile yazılır 18

19 Çizgi Etiketi: (<hr>) Bu etiket kullanıldığı yerde yatay çizgi çizilmesini sağlar. Kullanılabilecek parametreler şunlardır: Width: Çizginin yataydaki genişliğini belirler. <hr width= 200 > ya da <hr width= 50% > Size: Çizginin dikeyde kalınlığını belirler. <hr size= 3 > Color: Çizginin rengini belirler <hr color= red > ya da <hr color= #FF0000 > Align: Çizginin hizalanmasını sağlar. < hr align= left > Ör) <html> <head> <title> Çizgi ve Başlık Etiketinin Kullanımı </title> </head> <body> <h2> Bilgisayar Çevre Birimleri </h2> <i> Harici Donanım Birimleri </i> <hr size= 5 align= left color= red > Klavye <br/> Mouse <br/> Monitör <br/> <p align= right > 19

20 <i> Dahili Donamım Birimleri </i> </p> <hr width= 175 size= 5 align= right color= green > <p align= right > İşlemci <br/> Ram <br/> Harddisk <br/> Anakart <br/> Ekran kartı <br/> </p> <p align= center > <i> Dahili ve Harici Donamım Birimleri </i> <hr width= 50% size= 5 align= center color= blue > <p align= center > Modem <br/> Harddisk <br/> </p> </body> </html> 20

21 <PRE> Etiketi: Bu etiket arasına yazılan metinler olduğu gibi tarayıcıda görülür. Ör) <html> <head> <title> Pre Etiketinin Kullanımı </title> </head> <body> <pre> 21

22 Bu pre etiketinin uygulamasıdır </pre> </body> </html> <FONT> Etiketi: Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir. <FONT SIZE="X" FACE="isim COLOR="#XXXXXX"> Parametreler: Face : Yazı tipi (arial, tahoma, verdana,...) Size : Yazının büyüklüğü (1-7 arası). Bu değişkene -1, +2 gibi değerler verilerek metnin büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlanabilir Color : Yazının rengi belirler. Red, green gibi renklerin İngilizce karşılığı yazılır ya da RGB renk değeri belirtilir. RGB'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu düzende 9'dan 22

23 sonraki sayıları göstermek için A dan F ye kadar olan harfler kullanılır. # #0000FF #FF0000 #FFFF00 # #C0C0C0 #FFFFFF Siyah Mavi Kırmızı Sarı Yeşil Gri Beyaz Ör) <html> <head> <title> Font Etiketinin Kullanımı </title> </head> <body> <font size= 6 face= monotype corsiva 23

24 color= red > Font etiketini kullanıyorum <br/> </font> Bu yazı varsayılan yazı tipinde görüntülenir <br/> Çünkü font etiketleri arasında değildir <br/> <font size= 5 face= arial color= # > Font etiketini kullanıyorum </font> </body> </html> BG COLOR Parametresi: Sayfanın arka plan rengini belirler. <body> etiketinde kullanıldığında sayfa arka plan rengini; tabloda <td> etiketi ile kullanıldığında hücre rengini değiştirir. 24

25 Ör) <html> <head> <title> BG Color Etiketinin Kullanımı </title> </head> <body bgcolor= green > <font size= 5 color= yellow > Bu yazı sarı, arka plan rengi ise yeşildir. </font> </body> </html> <blockquote>... </blockquote> Etiketi: Bu etiket arasına yazılan metinler biraz daha içeriden başlatılır. Şekil itibarıyla paragrafa benzemektedir. &nbsp (Boşluk karakteri) Bir karakter boşluk bırakmak için kullanılır. Birden fazla boşluk bırakılmak isteniliyorsa aralarına ; konulmalıdır. gibi... topmargin, leftmargin parametreleri Topmargin üsten, leftmargin ise soldan bırakılacak boşluğu piksel cinsinden belirler. Bu parametreler BODY etiketi ile birlikte kullanılır. 25

26 BAĞLANTILAR (Linkler): Web sitelerinde, sayfalar arası geçişler linkler vasıtasıyla yapılmaktadır. Linkler farklı sayfaların birbirine bağlanmasını sağlar. Metinlere ve resimlere link özelliği verilebilir. Link vermek için <a> etiketi kullanılır. Sayfa dışı bağlantı oluşturma: <a href=... target=... > Yazı </a> href parametresine hedef sayfa yazılır. target parametresi bağlantının açılacağı yeri gösterir target="_blank": Bağlantı yeni bir pencerede açılır. target="_self": Bağlantı aynı pencere içerisinde açılır. target="_top" :Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target="çerçeve adı": Frame komutu ile çerçeve oluşturulmuşsa bağlantının açılacağı çerçeveyi belirtir. 26

27 <a href="http://www.yahoo.com"> Yahoo </a> <a href="http://www.yahoo.com" target= _blank > Yahoo </a> Sayfa içi bağlantı oluşturma: İstenilirse bir sayfa içerisinde yer alan uzun bir metnin değişik bölgelerine bağlantılar oluşturula bilir. <a href="#...">...</a>, <a name="...">...</a> komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Ör) <HTML> <HEAD> <TITLE> Bağlantı ayarları </TITLE> </HEAD> <BODY> <a href=#1>asp nedir?</a><br/> <a href=#2>asp nasıl çalışır?</a><br/> <a href=#3>asp ile bileşen kullanma</a><br/> <P><A NAME="1"></A><FONT SIZE=+1 COLOR="red"> 1.ASP nedir? </FONT> Sunucu taraflı bir teknoloji olan ASP, (Active Server Pages/ Aktif Sunucu Sayfaları) kullanıcı tarafına etkileşimli, dinamik Web sayfaları göndermek için 27

28 kullanılır. ASP, WEB programcılarına HTML, scripting ve kullanıcıdan bağımsız veritabanı uygulamalarını özgürce kullanma fırsatı verir. <P><A NAME="2"></A><FONT SIZE=+1 COLOR="red"> 2.ASP nasıl çalışır?</font> ASP arabiriminin işleyişi oldukça basit, sisteminize ASP eklentisini yüklediğinizde Internet Information Server'ınızın zaten sahip olduğu scripting özellikleri işlemeye başlıyor. İstemci tarafı sunucudan normal bir HTML sayfasını istediğinde, IIS bu dosyayı sabit diskten çağırarak istemci tarafındaki WEB tarayıcıya yollar. İstemci tarafından yapılan istek bir ASP sayfasıysa IIS bunu sayfanın uzantısından anlayarak ASP eklentisini devreye sokar. ASP eklentisi sayfa içindeki scriptleri yine IIS'a çalıştırdıktan sonra oluşan HTML sayfasını istemci tarafındaki WEB tarayıcısına yollar. <P><A NAME="3"></A><FONT SIZE=+1 COLOR="red"> 3.ASP ile bileşen kullanma </FONT> Microsoft'un sunucu teknolojisi ASP için birçok ikinci parti bileşen bulunuyor. ASP sayfaları ile uyum içerisinde çalışarak sonuç sayfalarının oluşturulması, WEB sayfası sahiplerine işlenmiş bilgi aktarılması gibi işlere yarayan bileşenlerden en popüler olanları ASPMail ve RoboHTTP. Server Objects firmasının bu iki ürünü, sayfadaki formların içeriğinin kullanıcıya olarak kullanılması, misafir defteri oluşturulması ve birçok değişik bilginin bir sayfada toplanması gibi işlemleri kolayca hallediyor. </BODY> </HTML> 28

29 E-Posta Adresine Bağlantı Oluşturma: Hazırlamış olduğunuz WEB sayfasında insan ların istediğiniz bir mail adresine kolay bir şekilde ulaşabilmesini sağlayabilirsiniz. Bunun için: <a href= mailto. >. </a> ifadesi kullanılır. Ör) <A E-Posta </A> 29

30 Bir dosyaya link verme: Kullanıcıların indirmesini istediğimiz bir dosyaya link verebiliriz. Ör) <a href= dosya.doc > Buraya tıkla </a> <a href= dosya.zip > Buraya tıkla </a> <a href= dosya.pdf > Buraya tıkla </a> Linkler Altındaki Çizgiyi Kaldırmak: Eğer herhangi bir düzenleme yapılmaz ise linkler altı çizgili bir şekilde gözükür. İstersek bunu kaldırabiliriz. Ör) <a href= dosya.txt style= text-decoration:none >... </a> LİSTELER: Listeler üçe ayrılır: a) Sıralı Listeler (Ordered List) b) Sırasız Listeler (Unordered List) c) Tanımlama Listeleri (Definition List) Sıralı Listeler: <OL>...</OL> Sıralı liste oluşturmak için <ol> etiketi kullanılır. Listeye elemanlar <li> etiketi ile ilave edilir. <ol> etiketi içerisinde type parametresi ile listenin 30

31 numaralandırma şekli belirlenir. Start parametresi ile liste istenilen sıradan başlatılabilir. Ör) <html> <head> <title> Sıralı Liste Örneği </title> </head> <body> <ol type= 1 > <li> Bilgisayar <ol type= a > <li> Donanım <ol type= i > <li> Dahili Donanım <li> Harici Donanım </ol> <li> Yazılım <ol type= i > <li> İşletim Sistemler <ul type= disc > <li> Windows <li> Linux <li> Mac Os </ul> <li> Uygulama Yazılımları </ol> </ol> <li> Elektronik 31

32 </ol> </body> </html> Sırasız Listeler: <UL>...</UL> Kullanım açısından sıralı listelere benzer fakat rakam ya da harf yerine madde imleri kullanılır. Sırasız listelerde start parametresi yoktur. Type parametresi ise şu değerleri alabilir. <ul type= disc = içi dolu daire ( ) <ul type= circle = içi boş daire ( ) <ul type= square = içi dolu kare ( ) 32

33 Tanımlama Listeleri: Bu tür listelerde numaralandırma ya da madde imleri kullanılmaz. Bir başlık ve bu başlığın altında ona ait yazı ekrana gelir. Ör) <html> <head> <title> Sıralı Liste Örneği </title> </head> <body> <dl> <dt> <font size="5" color="red"> Size </font> <dd> Metnin büyüklüğünü ayarlar, bu değişke ne -1, +2 gibi değerler verilerek metnin büyüklüğü nün bir eksiltilmesini veya iki artırılmasını sağlaya bilir, direkt olarak bir rakam vererek de bunu yapa bilirsiniz. Yazı tipi çok büyük olmamalıdır, büyük yazı tipleri hem kullanıcıların sayfayı okumasını zorlaştırır, hem de sayfanın güzelliğini bozar. <dt> <font size="5" color="red"> Color </font> <dd> Yazının rengini (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri) belirler. HTML'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu düzende 9'dan sonraki sayı1arı göster mek için A'dan F'ye kadar olan harfler kullanılır. 33

34 </dl> </body> </html> RESİM EKLEME Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG dir. Resimler <img> etiketi aracılığıyla kullanılır. Parametreler: src: Resmin bulunduğu dizini bu parametre ile bildiririz. <img src="resim.gif"> width: Resmin genişliğini piksel cinsinden bildirir. <img src="resim.gif" width="100"> 34

35 height: Aynı şekilde resmin yüksekliğini bildirir. <img src="resim.gif" height="100"> border: Resmin etrafındaki çizginin kalınlığını belirtir. <img src="resim.gif" border="6"> align: Yatay konum belirler; left, right, center değerlerini alır. <img src="resim.gif" align="left"> alt: Mouse resmin üzerindeyken görüntülenecek metin bu parametreye yazılır. <img src="resim.gif alt="bu bir resimdir."> Ör) <img src= resimler\gül.jpg > <img src=..\gül.jpg > <img src=..\resimler\gül.jpg > <img src=..\..\gül.jpg > Not:..\ işareti bir üst dizine çıkmak için kullanılır. Ör) <html> <head> <title>resim Ekleme</title> 35

36 </head> <body> <img src="../resim.jpg" width="250" height="185" border="4" alt="gezgin"> </body> </html> Resme Link Vermek: <a h ref= " h tt p:// w w w. gidilece k ad res " ta r get= ".. "><i m g s rc= " resi m.gif " ></a> Resimlerde MAP Kullanımı: Map'ler bir resmin değişik yerlerine tıklandığında değişik bağlantıların açılmasını sağlarlar. Burada kullanılan resmin GIF biçiminde olması gerekmektedir. Kullanımı şu şekildedir: <img src="resim.gif" ISMAP usemap="#harita" width=160 height=100> ISMAP resmin bir harita olduğunu, usemap="..." hangi harita tanımını kullanması gerektiğini gösterir. 36

37 Haritanın tanımı: <map name="harita"> <area shape="rect" coords"1,1,159,50" href="dikdortgen.html"> <area shape="circle" coords="80,100,40" href="daire.html"> <area shape="polyg" coords="10, 110, 150, 110, 80, 190, 9, 110" href="ucgen.html"> <area shape="default" nohref> </map> Tablolar: Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceği miz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz. <TABLE> Tablolar <table> etiketi ile başlar. <table> </table> 37

38 <table border= x parametresi: Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar. <TR> Tabloda satır oluşturmayı sağlar. <TD> Tabloda sütun oluşturmayı sağlar. Ör) Tek hücreli tablo <table border= 1 > <tr> <td> Bilgisayar </td> </tr> </table> Bilgisayar Ör) 38

39 Ör) <table border= 1 > <tr> <td> 1.Satır-1.Sütun </td> <td> 1.Satır-2.Sütun </td> <td> 1.Satır-3.Sütun </td> </tr> <tr> <td> 2.Satır-1.Sütun </td> <td> 2.Satır-2.Sütun </td> <td> 2.Satır-3.Sütun </td> </tr> <tr> <td> 3.Satır-1.Sütun </td> <td> 3.Satır-2.Sütun </td> 39

40 <td> 3.Satır-3.Sütun </td> </tr> </table> Çerçeve Biçimini Değiştirmek: <table border="1" style="border-collapse: collapse"> BGCOLOR: Bu parametre <table> etiketi ile kullanılırsa, tablonun arka plan rengini değiştirir. Eğer <tr> etiketi ile kullanılırsa tüm satırın arka plan rengini, eğer <td> etiketi ile kullanılırsa yalnızca o hücrenin arka plan rengini değiştirir. Ör) <table border= 2 > <tr bgcolor= red > <td> Bu 1.satır-1.hücre </td> <td> Bu 1.satır-2.hücre </td> </tr> <tr> <td> Bu 2.satır-1.hücre </td> <td bgcolor= green > Bu 2.satır-2.hücre</td> </tr> </table> 40

41 BACKGROUND: <table> etiketi ile birlikte kullanılırsa tablonun arkaplanına resim ekler. Sadece bir hücrenin arkaplanına resim eklemek istenilirse <td> etiketi ile kullanılır. Tüm bir satırın arkaplanına resim eklenmek istenilirse <tr> etiketi ile birlikte kullanılır. Ör) 5x30 baslik_fon2.jpg arka fon resmi Ör) <table border= 1 style="border-collapse: collapse"> <tr> <td background= baslik_fon2.jpg > ::: HABERLER ::: </td> 41

42 <td> &nbsp </td> <td background= baslik_fon2.jpg > ::: ÖNEMLİ - DUYURULAR ::: </td> </tr> </table> WIDTH VE HEIGHT: Witdth parametresi tablo yada hücrelerin piksel veya yüzde cinsinden genişliğini; Height parametresi tablo yada hücrelerin piksel veya yüzde cinsinden yüksekliğini belirler; Bu parametreler hiç kullanılmazsa, Web tarayıcısı hücre içeriklerini görüntüleyebileceği en makul genişliği tabloya otomatik olarak atayacaktır. Ör) <table border="1"> <tr> <td width=100 >Bilgisayar</td> </tr> 42

43 <tr> <td width=100 height=50>elektrik</td> </tr> <tr> <td height=40>elektronik</td> </tr> <tr> <td height=80>makine</td> </tr> </table> Not: Tabloya yükseklik ve genişlik değerleri verilirken aynı satırdaki hücrelerin yüksekliklerinin eşit olacağı ; aynı sütundaki hücrelerin eşit genişlikte olacağı unutulmamalıdır. Aynı satırda faklı yüksekliğe ya da aynı sütunda farklı genişliğe sahip bir hücre isteniliyorsa bu ancak birden fazla hücrenin birleştirilmesi ile mümkün olabilir. ALIGN ve VALIGN: Align parametresi tablo etiketi ile birlikte kullanıldığında tabloyu yatayda hizalamak için; <td> etiketi ile kullanıldığında hücre içerisindeki nesneyi hizalamak için kullanılır. 43

44 Valign hücre içerisindeki nesneyi düşey olarak hizalamak için kullanılır. Üç değer alabilir ve bunlar <tr> ve <td> etiketleri ile birlikte kullanılır. valign= top : Hücre içerisinde üst kısma hizalar valign= middle : Hücre içerisinde ortalar valign= bottom : Hücre içerisinde alt kısma hizalar Ör) <table border= 1 align= center > <tr> <td height= 50 width= 150 align= left > 1.HÜCRE </td> </tr> <tr> <td height= 50 width= 150 align= center > 2.HÜCRE </td> </tr> <tr> <td height= 50 width= 150 align= right > 3.HÜCRE </td> </tr> Ör) 44

45 <table border="1" width="150"heigth="300" align="center"> <tr height="100"> <td valign="top">üst</td> </tr> <tr height="100"> <td valign="middle">orta</td> </tr> <tr height="100"> <td valign="bottom">alt</td> </tr> </table> BAŞLIK ETİKETLERİ: Tablo bağlığı <thead> etiketleri arasına yazılır. Tablonun bilgi içeren gövde kısmı <tbody> etiketleri içerisine yazılır. Tabloya ikinci bir altbaşlık eklemek için <caption> etiketi kullanılır. Gövde içerisinde yazılmak istenen başlıklar <th> etiketleri arasına yazılır. <th> etiketi <td> ile eşdeğerdir. Yalnız içerisindeki yazı başlık şeklinde biraz kalın yazılır. <th> etiketi, <tr> içerisinde kullanılır. Ör) <table border= 1 > <thead> Matematik Dersi Sınav Sonuç Tablosu </thead> 45

46 <caption align="bottom"> Not ortalaması 50'nin altında olanlar bütünleme sınavına girmek zorundadırlar </caption> <tbody> <tr> <th width= 200 > Öğrenci Adı </th> <th width= 100 > 1.Sınav </th> <th width= 100 > 2.Sınav </th> <th width= 100 > Not Ortalaması </th> </tr> <tr align= center > <th> Mustafa AKTÜRK</th> <td> 50 </td> <td> 70 </td> <td> 90 </td> </tr> <tr align= center > <th> Serhat KILIÇ </th> <td> 75 </td> <td> 40 </td> <td> 58 </td> </tr> <tr align= center > <th> Serkan YAVUZ </th> <td> 35 </td> <td> 25 </td> <td> 30 </td> 46

47 </tr> </tbody> </table> CELLPADING ve CELLSPACING: Cellpading parametresi hücre içerisindeki nesnenin hücre kenarları ile olan uzaklığını ayarlar. Cellspacing parametresi hücreler arasındaki mesafeyi belirler

48 COLSPAN ve ROWSPAN : Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır. Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır. <td colspan= 3... <td rowspan=

49 Ör) <table border= 1 > <tr> <td colspan= 3 width= 100 height= 25 > 1 </td> <td rowspan= 4 width= 25 height= 100 > 1 </td> </tr> <tr> <td colspan= 2 width= 75 height= 25 > 3 </td> <td rowspan= 3 width= 25 height= 75 > 4 </td> </tr> <tr> <td colspan= 1 width= 50 height= 25 > 5 </td> 49

50 <td rowspan= 2 width= 25 height= 50 > 6 </td> </tr> <tr> <td width= 25 height= 25 > 7 </td> </tr> </table> Ör) <table border= 1 > <!-- Burası birinci satır --> <tr align= center > <td rowspan= 2 width= 75 height= 50 > 1 </td> <td width= 75 height= 25 > 2 </td> <td rowspan= 2 width= 75 height= 50 > 3 </td> <td rowspan= 4 width= 75 height= 100 > 4 </td> </tr> 50

51 <!-- Burası ikinci satır --> <tr align= center > <td width= 75 height= 25 > 5 </td> </tr> <!-- Burası üçüncü satır --> <tr align= center > <td colspan= 3 width= 225 height= 25 > 6 </td> </tr> <!-- Burası dördüncü satır --> <tr align= center > <td colspan= 3 width= 225 height= 25 > 7 </td> </tr> </table> 51

52 Uygulama) Aşağıdaki tabloyu HTML kodları ile yapınız (Tablo 800 x 600 olsun) ÇERÇEVELER (FRAME): Çerçeveler birden fazla HTML sayfasını tek bir sayfada birleştirerek gösterilmesini sağlarlar. Çerçevelerin özellikleri; * Her çerçeve kendi URL sine sahiptir. * Her çerçeveye ad verilebilir. * Her çerçeve kullanıcı tarafından boyutlandırılabileceği gibi, eğer istenilirse sabitlenebilir. 52

53 Çerçeveli sayfalar <frameset>.. </frameset> etiketleri ile oluşturulur. <HTML> <HEAD>. </HEAD> <FRAMESET>.. </FRAMESET> </HTML> COLS: Sayfayı dikey olarak bölmeye yarar. Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. * ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması için kullanılır. Ör) <frameset cols= 20%, 50%, 30% > <frameset cols= 100, 200, 500 > <frameset cols= 20%, 200, * > 53

54 ROWS: Sayfayı yatay olarak bölmeye yarar. Çerçevelerin alt alta satırlar görünümünde açılmasını sağlar. Cols için geçerli olan kurallar burada da geçerlidir. FRAME: Hangi çerçevede hangi sayfanın gösterileceği bu etiket ile belirlenir. <frame> etiketinin parametreleri şunlardır. Ör) Çerçeveleri kullanarak bir uygulama gerçekleştirelim. İlk önce normal iki tane sayfa yapıyoruz. Daha sonra bunları çerçeveli bir sayfa içerisine yerleştiriyoruz. 54

55 sayfa1.html <html> <head> <title> Bu birinci sayfadır </title> </head> <body bgcolor= yellow > <h1> 1.Sayfa </h1> </body> </html> sayfa2.html <html> <head> <title> Bu ikinci sayfadır </title> </head> <body bgcolor= blue > <h1> 2.Sayfa </h1> </body> </html> cerceve1.html <html> <head> <title> Alt-alta çerçeve </title> </head> <frameset rows= 30%,70% > <frame name= ust src= sayfa1.html > <frame name= alt src= sayfa2.html > </frameset> </html> 55

56 Not: oluşturulan çerçeveli sayfada çerçevelerin büyüklüğü kullanıcılar tarafından değiştirilmesi istenilmiyorsa frame etiketi kapatılmadan noresize parametresi kullanılır. <frame name= ust src= sayfa1.html noresize> <frame name= alt src= sayfa2.html noresize> cerceve2.html <html> <head> <title> Yan-yana çerçeve </title> </head> <frameset cols= 20%,80% > <frame name= sol src= sayfa1.html marginheight= 50 marginwidth= 20 scrolling= no > 56

57 <frame name= sag src= sayfa2.html marginheight= 50 marginwidth= 20 scrolling= no > </frameset> </html> Not: Çerçeveleri ayıran çizgi eğer istenilirse kaldırılabilir. Bunun için frameborder parametresi kullanılır. <frameset cols="20%,80%" frameborder="no"> NOFRAMES: <noframes> etiketi, eğer tarayıcının çerçeve desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde çerçeve desteği yoktur. Günümüzde kullanılan güncel tarayıcılarda çerçeve desteği vardır. 57

58 Uygulama) index.html <html> <head> <title> ::: Çerçeveli Sayfa ::: </title> </head> <frameset rows="15%,75%,10%"> <frame name="ust" src="ustsayfa.html"> <frameset cols="15%,*,15%"> <frame name="sol" src="solsayfa.html"> <frame name="orta" src="ortasayfa.html"> <frame name="sag" src="sagsayfa.html"> </frameset> <frame name="alt" src="altsayfa.html"> </frameset> </html> 58

59 ustsayfa.html <html> <head> <title> Bu ust sayfadır </title> </head> <body bgcolor="blue"> <center> <h1> Burada BANNER olsun </h1> </center> </body> </html> solsayfa.html <html> <head> <title> Bu sol sayfadır </title> </head> <body bgcolor="green"> <h3> Burada </h3> <h3> Menüler</h3> <h3> Olsun </h3> </body> </html> ortasayfa.html <html> <head> <title> Bu orta sayfadır </title> 59

60 </head> <body bgcolor="magenda"> <center> <font size="7"> Burada içerik olsun </font> </center> </body> </html> sagsayfa.html <html> <head> <title> Bu sağ sayfadır </title> </head> <body bgcolor="cyan"> <h3> Burada Reklamlar</h3> <h3> Olsun </h3> </body> </html> altsayfa.html <html> <head> <title> Bu alt sayfadır </title> </head> <body bgcolor="blue"> <center> <font size="6"> Burada Site tasarımı ile ilgili bilgiler olsun </font> 60

61 </center> </body> </html> Yukarıdaki örnekte solsayfa.html dosyasını aşağıdaki gibi değiştirelim. <html> <head> <title> Bu sol sayfadır </title> </head> <body bgcolor="green"> <a href= anasayfa.html target= orta style= text-decoration:none > ANASAYFA </a> <a href= urunler.html target= orta style= text-decoration:none > ÜRÜNLER </a> 61

62 <a href= iletisim.html target= orta style= text-decoration:none > İLETİŞİM </a> </body> </html> <iframe>... </iframe>: Normal bir sayfa içerisine çerçeve eklemek için kullanılır. Çerçevenin büyüklüğünü belirlemek için width ve height parametreleri kullanılır. Ör) <html> <head> <title> İçerisinde çerçeve olan sayfa </title> </head> <body bgcolor= fedcba > Bu sayfaya bir Frame eklenmiştir... <br><br> <iframe name= cerceve src= havadurumu.html width= 400 height= 400 scrolling= no > </iframe> </body> </html> 62

63 KAYAN NESNELER: Kayan nesne eklemek için <marquee> etiketi kullanılır. Bu etiket arasına eklenen yazı ve resimler ekranda hareket etmektedirler. Gerekli yerlerde ( örneğin Duyurular olabilir) kayan yazı eklemek sayfamızı daha güzel ve kullanışlı yapar. Fakat çok fazla kayan nesne eklenmemelidir. Kullanılan parametreler şunlardır: 63

64 Direction Hareket yönü belirlenir: Right, Left, Up, Down Bgcolor Width ve Height Loop Kayan nesnenin arka plan rengi ayarlanır. Scrolldelay Nesnenin hareket hızını belirler. Değer olarak sayı girilir. (Ölçü=milisaniye) Kayan nesne alanının yatay ve dikey uzunluğunu belirler. Nenenin kaç kez hareketi tekrarlayacağını belirler. Değer olarak sayı girilir. Scrollamount Her bir harekette nesnenin kaç piksel kayacağını belirler. Sayı değeri girilir. Behavior Nesnenin hareket türünü belirler. Alternate: Nesne her iki yöne doğru gidip gelir. Slide: Nesne her iki yönde bir kez kayar ve ortada kalır. Scroll: Nesne sürekli bir yönde hareket eder. Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee> Web Sitesine Hoşgeldiniz..</marque> </body> </html> 64

65 Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee> <img src= cicek.jpg> </marque> </body> </html> Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee bgcolor= green width 500 height= 50 > <font color= yellow > WEB TASARIMI </font> </marque> </body> </html> Uygulama) duyuru.html Ör) <html> <head> <title> Kayan yazı örneği </title> 65

66 </head> <body> <marquee direction= up scrolldelay= 300" bgcolor="silver"> <u> <font color= red > ::: DUYURULAR ::: </font><br> </u> <a href= # >Web Tasarım Kursu Açılmıştır</a><br><br> <a href= # >Hafta Sonu Tiyatroda Ne Var</a> <br><br> <a href= # >Çoçuklar İçin Resim Kursu</a> <br><br> </marque> </body> </html> index.html <html> <head> <title> Kayan yazı örneği </title> </head> <body> <table border= 0 width= 200 height= 200 align= right > <tr> <td> <iframe name= duyuru scrolling= no marginwidth="0" marginright="0" src= duyuru.html > </iframe> </body> </html> 66

67 ÇOKLU ORTAM ARAÇLARI: Web Sayfasına Ses Eklemek: Web üzerinde ses dosyaları iki şekildedir. - Durağan Sesler: Dinlemeye başlamadan önce tamamı karşıdan yüklenmek zorunda olan seslerdir. Kısa ses klipleri depolamak için iyidir. - Akan Sesler: Karşıdan yüklenirken çalınabilirler. Temel yararları; uzun olabilmeleri ve sesin tamamının karşıdan yüklenmeden çalınabilmesidir. Internet ortamında arşivlenmiş olarak bir sürü ses dosyası bulunabilir. Ses dosyası uzantıları wav, wma, au, mp3, mpg, mpeg, mid, avi olabilir. Ses kullanmanın, tarayıcının bir Web sayfasında karşılaştığında bir sesi nasıl çalacağı ile ilgili olarak farklı olan üç yaklaşım vardır. - Sese bağlanmak ; bu durumda ses bir dış yardımcı uygulamada çalınır. - Sesi gömmek ; bu durumda ses tarayıcı Ya da bir eklenti tarafından çalınır. - Sesi arka plan sesi olarak ayarlamak; bu durumda ses, tarayıcı Ya da bir eklenti tarafından sayfa açılır açılmaz çalınır. 67

68 - Seslere Bağlanmak: Ör) <p> <a href=''sesdosyasi.wav''> Ses için tıkla </a> </p> - Sesleri Gömmek: Sesleri html kodları arasında gömmek için embed etiketi kullanılır. Embed ile gömülen sesler tarayıcı ekranında beliren bir çoklu ortam konsolunda çalınır. Diğer yandan tarayıcılar gömülü ses olarak çalınabilecek ses dosyaları türlerinde sınırlıdırlar. WAV biçimini kullanmanız büyük bir olasılıkla yeterli olacaktır. Embed etiketinin parametreleri: Src : Ses dosyasının yolu ve adı Width : konsolun genişliği (pixel) Height : konsolun yüksekliği (pixel) Autostart : Otomatik çalma (True, False) Loop : Sesin kaç kez yenileneceğini belirler. Ör) (1,2,3...ya da True) <html> <head> <title>gömülü ses örneği</title> </head> <body> <embed src="beethoven.wma" width="200" height="50" autostart="false"> 68

69 </body> </html> - Arka Plan Sesleri Kullanmak: Bir web sayfasına arka planda ses eklemek için <BGSOUND> etiketi kullanılır. Bu ses kullanıcılar tarafından kontrol edilemez. Loop parametresi sesin tekrarlanma sayısını belirler. -1 ya da infinite değerini aldığında ses sürekli çalar. Ör) <html> <head> <title> Ses örneği </title> </head> <body> <bgsound src=''sesdosyası.wma'' loop=''-1''> </body> </html> 69

70 Web Sayfasına Video Eklemek: Web üzerinde sesler gibi videolar da durağan ya da akan olabilir. Çoğunluğu akan şekildedir, çünkü video dosyaları ses dosyalarından daha büyüktür. Durağan video dosyaları için bilinen biçimler: MPEG, AVI ve QuickTime'dır. MPEG videoları ; bir.mpe,.mpg ya da.mpeg dosya uzantısına sahiptir. AVI videoları.avi kullanır ve QuickTime videoları ise.mov ya da.qt dosya uzantısı kullanır. AVI videoları.avi uzantısı kullanır. Durağan videolar özel programlarla akan videolara dönüştürülebilir. Sayfalarımıza video ekleme yolları: - Videolara bağlanmak: Ses dosyalarında olduğu gibi <a> etiketi kullanılır. Ör) <p> <a href=''videodosyasi.avi''> Video için tıkla </a> </p> - Videoları gömmek: Kullanıcı kontrollü video eklemek için <embed> etiketi kullanılır. Bu etiket ile eklenen videoyu oynatacak programda otomatik açılmaktadır. Kullanılacak parametreler şunlardır: 70

71 Width ve Height: Oynatıcının boyutlarını piksel cinsinden ayarlar. Loop: Videonun kaç kez oynatılacağını belirler. 0 - Video bir kez oynar 1 - Video sürekli oynar Autostart: Videonun nasıl başlayacağını belirler. ''true'': Video otomatik başlar. ''false'': Video play tuşuna basıldığında başlar. Ör) <html> <head> <title> Video örneği </title> </head> <body> <embed src= video.mpeg width= 200 height= 200 autostart= false > </body> </html> - Akan Videoları Oluşturmak ve Kullanmak: Çoğu video bir durağan dosya olarak ortaya çıktığından, bunları akan çoklu ortam dosyasına çevirmek gerekir. Bunun için Windows Media Format ya da Real Media gibi akan bir biçim kullanılabilir. Bu dönüşümleri yapmak için Windows Media Encoder ve RealProducer programları kullanılabilir. 71

72 Akan çoklu ortam dosyalarına bağlanmak: Bir akan dosya ve bir durağan dosyaya bağlan ma arasındaki tek fark, akan dosyaların ek bir yar dımcı dosya gerektirmesidir. Bu dosyaya meta dosya denir. <asx version=''3.0''> <entry> <ref href=''uydu.wmv''> </entry> </asx> Windows Media dosyaları, özel bir XML biçiminde depolanırlar ve bir.asx dosya uzantısına sahiptir ler.yukarıdaki dosya.asx uzantısıyla kaydedilir. Ör1) <html> <head> <title>akan Video Örneği - 1</title> </head> <body> <a href="uydu.asx">video için tıklayınız...</a> </body> </html> Ör2) <html> <head> 72

73 <title> Akan Video Örneği - 2 </title> </head> <body> <embed src="uydu.asx" width="400"height="400" autostart="false"> </body> </html> HTML FORMLARI: Formlar, internet kullanıcıları arasında veri alışverişi sağlamak için kullanılan ideal bir araçtır. Kullanıcılardan alınan bilgiler, bilgilerin değerlendireleceği bir programa aktarılır. Genelde bu bilgiler bir veritabanına aktarılır ve orada tutulur. İstenilirse bu bilgiler adreslerine de yönlendirilebilir. Form alan oluşturmak için: <form>... </form> etiketleri kullanılır. <FORM ACTION=... METHOD=... TARGET=... > </FORM> Action : Formdan girilecek bilgilerin değerlendirileceği dosyanın URL yolunu gösterir. Method : Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini gizli olarak değerlendirici 73

74 ye yönlendirir. Target: Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri : _blank, _top gibi değerlerden biri olabilir. <input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. Genel kullanımı: <INPUT ALIGN= tip [CHECKED] MAXLENGTH= uzunluk NAME= isim SIZE= boyut SRC= adres TYPE= tip VALUE= değer > 74

75 Varsayılan olarak görüntülenmesini istediğimiz elaman value parametresine yazılır. Form Elemanları: Text (Metin Kutusu): Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength parametreleri, bu kontrolle birlikte kullanılabilir. Ör) <html > <head> <title>metin Kutusu</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254" > 75

76 </head> <body> <form name="form1" method="post" action=""> <pre>tc Kimlik No : <input type="text" name="tckimlik" value="tc Kimlik No" size="20" maxlength= 11 /> </pre> <pre>adınız : <input type="text" name="ad" value="adınız" size="20"/> </pre> <pre>soyadınız : <input type="text" name="soyad" value="soyadınız" size="20"/></pre> </form> </body> </html> Password(Şifre Alanı): Formumuza parola yazılabilecek alan eklemek için kullanılır. Kullanımı metin kutusu ile aynıdır. Yalnızca type değerine password yazılır. <pre>kullanıcı : <input type="text" name="kullanici" size="20" > </pre> <pre>sifre : <input type="password" name="sifre" size="20" maxlength= 8 > </pre> 76

77 CheckBox(Onay Kutusu): Onay kutusu eklemek için kullanılır. Checked parametresi on yapılırsa varsayılan olarak onay kutusu işaretlenmiş olur. <html> <body > <form name="form1" method="post" action=" "> <input type="checkbox" name="kutu1" checked="on"> İlköğretim<br> <input type="checkbox" name="kutu2"> Lise <br> <input type="checkbox" name="kutu3"> Üniversite 77

78 </form> </body> </html> Radio (Yuvarlak İşaret Düğmesi): Normalde onay kutusuna benzer. Name kısmına aynı isimler verilirse kullanıcıların birçok seçe nek içerisinden sadece bir tanesini seçmelerine izin verir. Bu durumda value parametresine farklı değerler verilmelidir. <html> <body > <form name="form1" method="post" action=""> <p><u><h2>yaş Aralığı</h2></u></p> <input type="radio" name="yas" value="a"> 0-18 <br> <input type="radio" name="yas" value="b"> 19-24<br> <input type="radio" name="yas" value="c"> 25-34<br> <input type="radio" name="yas" value="d"> 35 ve 78

79 yukarısı<br> </form> </body> </html> Textarea (Metin Alanı): Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. rows ve cols parametreleri ile alanın ekranda kaplayacağı büyüklük belirlenir. <html> <body > <form name="form1" method="post" action=""> <p><u><h2>istek ve Şikayetleriniz </h2></u></p> <textarea name="alan" cols="50" rows="10"> 79

80 </textarea> </form> </body> </html> Combo Box (Açılan Kutu): <html> <head> <title>açılan Kutu Örneği</title> </head> <body> <form name="form1" method="" action=""> <select name="sehir"> <option>ankara </option> <option>istanbul </option> <option>izmir </option> <option>erzincan </option> </select> </label> 80

81 </form> </body> </html> Label (Etiket): <html> <head> <title>etiket Örneği</title> </head> <body> <form name="form1" method="" action=""> <label>adınızı Giriniz: <input type="text" name="ad"> </label> </form> </body> </html> 81

82 Gizli Alan (Hidden Field): Gizli alanlar tarayıcıda kullanıcıya görünmez. Bu alanlarda kullanıcıya görünmesini istemediğimiz verileri tutabiliriz. <form name="form1" method="get" action=""> <label>adınızı Giriniz <input type="text" name="textfield" /> </label> <input type="hidden" name="hiddenfield" /> </form> Button (Buton): Normalde bir buton oluşturmak için aşağıdaki kod kullanılır. <input type="button" name="hesap" value="buraya Tıkla"> 82

83 Submit (Gönder) ve Reset (Sil) Butonları: Submit butonu Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir. Submit butonu tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar. <form name="form1" method="" action=""> <input type="submit" value="gönder"> <input type="reset" value="sil"> </form> Uygulama) <html> <head> <title>örnek</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254" > 83

84 </head> <body> <hr> <form name="form1" method="post" action="..."> <pre> adresiniz :<input name=" " size=30> </pre> <pre> İsminiz :<input name="name" size=30> </pre> <u>katılmak istediğiniz kursu yazınız: </u><br> <input name="ders" type="checkbox" value="grafik" checked="on"> Grafik-Tasarım <input name="ders" type="checkbox" value="web" > Web-Tasarım <input name="ders" type="checkbox" value="programlama">visual Studio.NET <input name="ders" type="checkbox" value="isletimsis">windows 2003 Server<br> <p> Görüşlerinizi yazabilirsiniz: <p> <textarea name="body" rows=10 cols=50>buraya birşeyler yazabilirsiniz. </textarea> <br> <input type="submit" value="gönder" name="submit"> <input type="reset" value="temizle" name="reset"> 84

85 <br> </form> <hr> </body> </html> Formun action parametresine ne yazılabilir: a) <form method= post > 85

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

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ı

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ı

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ı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

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ı

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ı

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ı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

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 (Hyper Text Markum Language)

HTML (Hyper Text Markum Language) HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

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ı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

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ı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

Detaylı

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için HTML Ders 8 Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için Web sayfasının bu kısmında kayan çerçeve

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ı

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ı

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ı

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ı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

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ı

Temel HTML Eğitimi. Erman Yükseltürk

Temel HTML Eğitimi. Erman Yükseltürk Temel HTML Eğitimi Erman Yükseltürk HTML Nedir? 1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması

Detaylı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 482BK0153 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

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ı

TEMEL HTML DERS NOTLARI - Table-Form

TEMEL HTML DERS NOTLARI - Table-Form Tablolar ... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir.

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ı

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ı

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

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

İnternet Programcılığı

İnternet Programcılığı İnternet Programcılığı 1 Öğr.Gör. Fırat YÜCEL Akdeniz Üniversitesi Enformatik Bölümü Kaynak H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002 2 Web

Detaylı

WEB TASARIMI. Đnternet Nedir?

WEB TASARIMI. Đnternet Nedir? ĐÇĐNDEKĐLER İÇİNDEKİLER... 1 WEB TASARIMI... 2 İnternet Nedir?... 2 HTML (Hypertext Markup Language)... 4 (Hareketli Metin İşaretleme Dili)... 4 KLASÖR VE DOSYA İSİMLERİNDE... 5 STANDART TAKILAR... 5

Detaylı

Metin Tabanlı İçerik Oluşturma Araçları

Metin Tabanlı İçerik Oluşturma Araçları Metin Tabanlı İçerik Oluşturma Araçları Microsoft Office Word Kelime işlemci, görsel nesnelerin veya çizimlerin resim ya da arka plan olarak kullanıldığı metinler oluşturabilen, harita ve tablo gibi şekiller

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ı

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ı

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ı

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir: HTML HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece

Detaylı

Html Komutlar. ... belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Html Komutlar. <TITLE>... </TITLE> belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r. Html Komutlar 1. ... Aras nda Kullan lan Komutlar ... belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Detaylı

MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS. Web İçerik Sistemi. Bilgi İşlem Daire Başkanlığı-WEB GRUBU

MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS. Web İçerik Sistemi. Bilgi İşlem Daire Başkanlığı-WEB GRUBU MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS Web İçerik Sistemi -WEB GRUBU 2013 B i l g i İ ş l e m D a i r e B a ş k a n l ı ğ ı MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI BİRİM BÖLÜM DAİRE

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI 2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI İşletim Sisteminde Yapılan Uygulamalar Bir Bilgisayarda Hangi İşletim Sistemi Yüklü Olduğunu

Detaylı

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir?

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page vii Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? 6 Web Taray c (Browser)

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ı

BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11

BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11 BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11 Web Tabanlı Teknolojiler ve Uygulamaları (3,0) 3 Temel kavramlar. İnternet. İstemci/sunucu teknolojisi. Internet içerik sunucuları. HTML, Perl, CGI, JavaScript,

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ı

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ı

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ı

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Hesap Tabloları(Excel 2007) HAFTA 1 1. Hesap Tablolarına Giriş 1.1. Hesap tablosu tanımı, kullanım amacı ve yerleri 1.2. MS Excel Uygulamasına giriş

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ı

İNTERNET TABANLI PROGRAMLAMA- 5.ders

İNTERNET TABANLI PROGRAMLAMA- 5.ders Html nedir? İNTERNET TABANLI PROGRAMLAMA- 5.ders Hareketli metin işleme dili basitce browser larda görebileceğimiz (internet exp.) internet dökümanları olusturmaya yarayan bir cesit dildir html ile oluşturduğumuz

Detaylı

Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. Ders 2

Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. Ders 2 Giriş Html temelleri Ders 2 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ı

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ı

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

WEB TASARIMI VE PROGRAMLAMA

WEB TASARIMI VE PROGRAMLAMA WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 3

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 3 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 3 Etiketi ve Alt Etiketleri 2 Sayfa içeriği ve biçimi ile ilgili ayarların yapıldığı etikettir. etiketinin aldığı özellikler: Alink: Aktif bağlantıların

Detaylı

2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. > 1) Tüm kodlar bunun arasında çalışır. 2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. 3) Sayfa gövde kısmıdır. Renkler, yazılar

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ı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

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ı

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ı

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2 Giriş Html temelleri Ders 2 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ı

WEB TASARIMI VE PROGRAMLAMA DERSİ

WEB TASARIMI VE PROGRAMLAMA DERSİ WEB TASARIMI VE PROGRAMLAMA DERSİ Dersin Modülleri HTML 1 HTML 2 Web Tasarım Editörü 1 Web Tasarım Editörü 2 Web Tasarım Editörü 3 Web Tasarım Editörü 4 Etkileşimli Web Uygulamaları 1 Etkileşimli Web Uygulamaları

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ı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE BASİT WEB İŞLEMLERİ 482BK0152 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan

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ı

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ı

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ı

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1 Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte

Detaylı

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM

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ı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

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 SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

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ı

Yönetim Anasayfa : Tanımlar : Parametreler : Seo yolu izlenerek dinamik seo modülüne erişebilirsiniz.

Yönetim Anasayfa : Tanımlar : Parametreler : Seo yolu izlenerek dinamik seo modülüne erişebilirsiniz. Güncelleme Dokümanı Versiyon 3.00 Dinamik SEO Modülü Dinamik SEO modülü site sayfalarının arama motoru sitelerinde daha üst sıralarda çıkabilmesine yönelik yapılan optimizasyon modülüdür. Yeni eklentiler

Detaylı

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Bilgi Teknolojileri (IT) Kavramları, Bilgisayar Kullanımı ve Dosyaların Yönetimi, Bilgi ve İletişim HAFTA 1 1. Genel Kavramlar(Bilgisayarın tanımı,bilgi

Detaylı

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI Kelime İşlemci Nedir? Bilgisayarda yazıların(metinlerin) yazılmasını ve düzenlenebildiği, resimlerin ve tabloların eklenebildiği yazılımların(programların) genel adıdır.

Detaylı

T.C. MİLLİ EĞİTİM BAKANLIĞI

T.C. MİLLİ EĞİTİM BAKANLIĞI T.C. MİLLİ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) BİLİŞİM TEKNOLOJİLERİ HTML 1 ANKARA 2007 Milli Eğitim Bakanlığı tarafından geliştirilen modüller; Talim

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ı

MICROSOFT WORD 2002. Şekil 1 TABLO HAZIRLAMA : Word 2002/II TAB AYARLARI :

MICROSOFT WORD 2002. Şekil 1 TABLO HAZIRLAMA : Word 2002/II TAB AYARLARI : MICROSOFT WORD 2002 TAB AYARLARI : Yazımı belli bir sütundan başlatmak için kullanılır. Tab (durak) ayarı yapıldıktan sonra her Tab tuşuna basıldığında eklenti noktası yerleştirilen tab ayarlarına gelir.

Detaylı

İSMET AKTAR ANADOLU TEKNİK LİSESİ BİLİŞİM TEKNOLOJİLERİ ALANI WEB PROGRAMCILIĞI DALI

İSMET AKTAR ANADOLU TEKNİK LİSESİ BİLİŞİM TEKNOLOJİLERİ ALANI WEB PROGRAMCILIĞI DALI İSMET AKTAR ANADOLU TEKNİK LİSESİ BİLİŞİM TEKNOLOJİLERİ ALANI WEB PROGRAMCILIĞI DALI WEB TASARIMI VE PROGRAMLAMA DERSİ TEMEL KAVRAMLAR Bilişim Teknolojileri Web Tasarımı ve Programlama Dersi Durhan GABRALI

Detaylı

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği ÖNDER BİLGİSAYAR KURSU Microsoft Office Kursu Eğitim İçeriği Microsoft WORD 1. PENCERE ELEMANLARI VE GÖRÜNTÜLEME BİÇİMLERİ 1.1. Genel Bilgiler 1.2. Ekran Görünümleri 1.3. Metin Sınırları ve Basımda Çıkmayan

Detaylı

Okul Web Sitesi Yönetim Paneli Kullanımı

Okul Web Sitesi Yönetim Paneli Kullanımı Millî Eğitim Bakanlığı Bilgi İşlem Grup Başkanlığı tarafından ortak web sitesi tasarım çalışması yapılmıştır. Çalışmanın amacı tüm kurumlarımızın standart bir web sayfasına sahip olmalarını sağlamaktır.

Detaylı

PHP ile İnternet Programlama

PHP ile İnternet Programlama PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 5. BÖLÜM: Oturum Yönetimi ve Güvenlik Sayfaya Yönlendirme PHP sayfamızdan

Detaylı

İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi

İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi Duyurular Nasıl Girilir? Duyuru girmek için ilk olarak İKÇ yönetim panelinden; 1-Kullanıcı adınızı

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

M i c r o s o f t E X C E L ÇALIŞMA SORULARI

M i c r o s o f t E X C E L ÇALIŞMA SORULARI M i c r o s o f t E X C E L ÇALIŞMA SORULARI 1. Elektronik tablolama veya hesaplama programı olarak adlandırılan uygulama aşağıdakilerden hangisidir? a. Microsoft Windows b. Microsoft Excel c. Microsoft

Detaylı

Ekran 1 : Font Komutları Dosyası ekranı

Ekran 1 : Font Komutları Dosyası ekranı 27 Ekim 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : ETASQLFORM DĐZAYNLARDA FARKLI FONT LU YAZI TĐPĐ KULLANIMI ETASQL Doküman Düzenleyicisi olan ETASQLFORM.EXE ile Fatura, Sipariş,

Detaylı

T.C. istanbul ÜNiVERSiTESi ÖĞRENCi BiLGi SiSTEMi. ÖĞRETiM ELEMANI KULLANIM KILAVUZU

T.C. istanbul ÜNiVERSiTESi ÖĞRENCi BiLGi SiSTEMi. ÖĞRETiM ELEMANI KULLANIM KILAVUZU T.C. istanbul ÜNiVERSiTESi ÖĞRENCi BiLGi SiSTEMi ÖĞRETiM ELEMANI KULLANIM KILAVUZU 1 1. Sisteme Giriş Nokta Üniversite Otomasyonu sistemini kullanabilmek için öncelikle Windows işletim sisteminde bulunan

Detaylı

Powerpoint; Microsoft ofis programları içinde bulunan bir sunum hazırlama programıdır.

Powerpoint; Microsoft ofis programları içinde bulunan bir sunum hazırlama programıdır. Powerpoint; Microsoft ofis programları içinde bulunan bir sunum hazırlama programıdır. Powerpoint ile toplantılar da veya herhangi bir konu üzerinde açıklama getirmek için sunu hazırlarız. Powerpoint2003

Detaylı

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI Ders Notları WEB TASARIMI Đçerik: HTML, Frontpage 2000, Dreamweaver MX, Photoshop 6.0, Flash MX, Paint Shop Pro, Swish, Javascript, Javaapplet, FTP, Đsim Registeri, Server Kiralama Đnternet Nedir? Đnternet,

Detaylı