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

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

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

Transkript

1 HTML Web Tasarımı ve Programlama

2 İ Ç 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 Çoklu Ortam Araçları Çerçeveler Stil Şablonları (CSS) Formlar 2

3 INTERNET ORTAMI VE WEB TASARIMI Alan Adı (Domain) IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen halidir. gov : Hükümet kurumları / government edu : Eğitim kurumları / education org : Ticari olmayan kuruluşlar / organization com : Ticari kuruluşlar / company mil : Askeri kurumlar / military net : Servis sunucular / network ac : Akademik kuruluşlar / academic int : Uluslararası kuruluşlar / international 3

4 INTERNET ORTAMI VE WEB TASARIMI Web Alanı / Barındırma (Hosting) Hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür. Bu hizmet, hosting firmaları tarafından belirli süreliğine sağlanır. Server (sunucu) bilgisayarlar, hosting amacıyla kullanılan gelişmiş donanımsal özelliklere sahip olan ve birçok kullanıcıya aynı anda hizmet veren bilgisayarlardır. 4

5 HTML TEMEL ETİKETLERİ HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. HTML komutları; herhangi bir metin düzenleme editöründe yazılabileceği gibi, çeşitli web tasarım editörleriyle de oluşturulabilir. HTML komutları etiketlerden (tag) oluşur. 5

6 HTML TEMEL ETİKETLERİ HTML komutları < ve > işaretleri arasına yazılır. <etiketadi> </etiketadi>, <tag>..</tag> HTML etiketleri yazılırken Türkçe karakterler kullanılmamalıdır. (ş, ç, ö, ü, ı, ğ) BÜYÜK-küçük harf duyarlı değildir. <body>.</body> veya <Html>.</> Açılan bir etiket mutlaka kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında / işareti unutulmamalıdır!!! 6

7 HTML TEMEL ETİKETLERİ HTML dosyaları sunucu bilgisayarın sabit diskinde. ya da.htm uzantısı ile saklanır. Her web sayfası; <> <head> <body> etiketi içermelidir. Bu dizilim kuralına uymadığınız takdirde bile sayfanız görüntülenebilir ancak biçimlendirme sorunları yaşayacağınızı ve ziyaretçilerinizin sayfa içerisinde gezinirken sorun yaşayabileceğini unutmayın!!! 7

8 HTML TEMEL ETİKETLERİ <> HTML kodlarının yazımına başladığımızı gösteren etikettir. Tüm HTML kodları <> </> arasında yer alır. </> ile HTML kodlarının yazımının bittiği anlaşılır. Bu etiketin hiçbir parametresi yoktur. 8

9 HTML TEMEL ETİKETLERİ <head> Sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan meta etiketleri bölümüdür. Kullanılacak Parametreler name http-equiv Size Author, description ve keywords özellikleri tanımlanır. Refresh, expires, content ve content-style-type özellikleri Yazının boyu belirlenir. 9

10 HTML TEMEL ETİKETLERİ <head> NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. <meta name="author" content=«aosbilisim"> <meta name="description«content="sayfanın tanımını yazınız"> <meta name ="description" content ="Bu sayfa, Web Tasarımı ve Programlama dersi modülleri için hazırlanmıştır. "> <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız."> 10

11 HTML TEMEL ETİKETLERİ <head> HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir. <meta http-equiv=content-type content="text/htm; charset=windows-1254"> <meta http-equiv=content-type content="text/htm; charset=iso "> <meta http-equiv=content-type content="text/htm; charset=utf-8"> 11

12 HTML TEMEL ETİKETLERİ <head> <meta name="robots" content="all veya none"> Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin all, Engelleme none kullanılır. Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. 12

13 HTML TEMEL ETİKETLERİ <head> <title>: Sayfanın tarayıcıda görünecek başlığının ne olacağını belirlemek için kullanılır. 13

14 HTML TEMEL ETİKETLERİ <body> HTML belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. bgcolor background link alink vlink Sayfanın arkaplân rengini belirlemek için kullanılır. Arkaplanda kullanılmak istenilen resmi belirlemek için kullanılır. Sayfada kullanılacak linklerin rengini belirlemek için kullanılır. Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi belirlemek için kullanılır. Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek için kullanılır. 14

15 LİSTELEME ETİKETLERİ <ol> Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. 1. Elma 2. Armut 3. Kavun 15

16 LİSTELEME ETİKETLERİ <ol> type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz. a a. b. c. A. Elma B. Armut C. Kavun i i. I. Elma ii. II. Armut iii. III. Kavun 16

17 LİSTELEME ETİKETLERİ <ol> Sıralamanın her zaman 1 den veya A dan başlamasının istenmediği durumlarda start parametresi kullanılır. C. Elma D. Armut E. Kavun 17

18 LİSTELEME ETİKETLERİ <ul> Madde imli liste oluşturmak için kullanılır. <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır. Elma Armut Kavun 18

19 LİSTELEME ETİKETLERİ <ul> type parametresi kullanarak madde iminin şeklini belirleyebiliriz. o Elma Armut Kavun 19

20 LİSTELEME ETİKETLERİ <li> Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi şekilde olacağını <ol> ve <ul> etiketleri belirler. 20

21 METİN DÜZENLEME ETİKETLERİ <hx> Başlık eklemek için kullanılan etiketlerdir. x ifadesi, 1 den 6 ya kadar değer almaktadır. x değeri azaldıkça yazı büyür. 21

22 METİN DÜZENLEME ETİKETLERİ <hx> align Metin / Nesne hizalama için kullanılan parametredir. left sola right sağa center ortaya justify iki yana yasla 22

23 METİN DÜZENLEME ETİKETLERİ <b> İstenilen metni kalın (bold) olarak yazmak için kullanılır. <b> </b> etiketleri arasında yazılı olan metni kalın yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 23

24 METİN DÜZENLEME ETİKETLERİ <u> İstenilen metni altı çizili (underline) olarak yazmak için kullanılır. <u> </u> etiketleri arasında yazılı olan metnin altını çizili yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 24

25 METİN DÜZENLEME ETİKETLERİ <i>, <I> İstenilen metni eğik (italik) olarak yazmak için kullanılır. <i> </i> etiketleri arasında yazılı olan metni eğik yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 25

26 METİN DÜZENLEME ETİKETLERİ <br> Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz!!! Ey Türk Gençliği! Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini, ilelebet, muhafaza ve müdafaa etmektir. 26

27 METİN DÜZENLEME ETİKETLERİ <p> Paragraf oluşturmak için kullanılır. <p> </p> etiketleri arasında yazılı olan metni ayrı bir paragraf içinde gösterir. 27

28 METİN DÜZENLEME ETİKETLERİ <font> Metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. size, color ve face parametreleri ile kullanılabilir. size yazı büyüklüğü color yazı rengi face yazı tipi <font face="algerian" size="7" color="purple">merhaba</font> 28

29 GÖRÜNÜM DÜZENLEME ETİKETLERİ <hr> Sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket kapatılmaz!!! size, width ve align parametreleri ile kullanılabilir. size çizgi kalınlığı width çizgi uzunluğu align çizgi konumu (hizalama) <hr size= 6 width= 200 align= center > 29

30 BAĞLANTI (KÖPRÜ) OLUŞTURMA <a href>..</a> Sayfa içi/dışı tüm bağlantılar <a href> </a> etiketleri kullanılarak tanımlanır. <a href= baglanti_adresi >metin_nesne</a> Sayfa Dışı Bağlantı <a href= >AOSBilişim</a> AOSBilişim <a href= index. >Ana Sayfa</a> Ana Sayfa 30

31 BAĞLANTI (KÖPRÜ) OLUŞTURMA Sayfa İçi Bağlantı Öncelikli olarak sayfa içi bağlantı verilecek kısım adlandırılmalıdır (çapa işlemi). Adlandırma, <a name="...">...</a> etiketi kullanılarak yapılır. <a name="ornek">hyper Text Markup Language</a> Ardından bağlantı verilecek alana gelinip <a href =#...">...</a> etiketi köprü tanımlanır. <a href="#ornek">html Nedir?</a> Html Nedir? Hyper Text Markup Language 31

32 BAĞLANTI (KÖPRÜ) OLUŞTURMA E-Posta Adresine Bağlantı <a href= mailto:e-posta adresi >.</a> komutu kullanılarak <a href="mailto: göndermek için tıklayın.</a> e-posta göndermek için tıklayın. 32

33 TABLOLARLA ÇALIŞMA <table> Sayfaya tablo eklemek için kullanılır. </table> etiketiyle sonlandırılır. Satır ve sütun tanımlamaları için; <table> içinde <tr> ve <td> etiketleri de kullanılmalıdır. 33

34 TABLOLARLA ÇALIŞMA <tr> Tabloda satır oluşturmak için kullanılır. 34

35 TABLOLARLA ÇALIŞMA <td> Tabloda sütun oluşturmak için kullanılır. 35

36 TABLOLARLA ÇALIŞMA <table> border Hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. 0 36

37 TABLOLARLA ÇALIŞMA <table> bordercolor Çerçevenin renginin ayarlamak için kullanılır. 37

38 TABLOLARLA ÇALIŞMA <table> bgcolor Hücre/hücrelerin arkaplan renginin ayarlamak için kullanılır. 38

39 TABLOLARLA ÇALIŞMA <table> background Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır. 39

40 TABLOLARLA ÇALIŞMA <table> width Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. height Tablonun veya hücrenin pixel cinsinden yüksekliğini belirlemek için kullanılır. 40

41 TABLOLARLA ÇALIŞMA <table> colspan Aynı satırdaki hücreleri birleştirmek için kullanılır. 41

42 TABLOLARLA ÇALIŞMA <table> rowspan Aynı sütundaki hücreleri birleştirmek için kullanılır. 42

43 TABLOLARLA ÇALIŞMA <table> cellspacing Hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır

44 TABLOLARLA ÇALIŞMA <table> cellpadding Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığını belirlemek için kullanılır. 0!!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa (boşluk) kullanılmalıdır. Aksi takdirde çizgiler gözükmez!!! 44

45 ÇOKLU ORTAM ARAÇLARI Resim Ekleme Resim eklemek için kullanılan etiketi <img src> dir. src, ekleyeceğimiz resmin bulunduğu dizini gösterir. Bu etiket kapatılmaz!!! <img src= resim1.jpg >Gökyüzü Sayfa içine eklenecek resmin kaynak adresi 45

46 ÇOKLU ORTAM ARAÇLARI Resim Ekleme PARAMETRE GÖREVİ width height border alt align Eklenilecek resmin pixel cinsinden genişliğini gösterir. Eklenilecek resmin pixel cinsinden yüksekliğini gösterir. Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Border= 0 olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar. Fare ile resmin üzerine gelindiğinde ekranda görüntülenmesi istenen metni belirlemek için kullanılır. Resim hizalamasını belirtmek için kullanılır. 46

47 ÇOKLU ORTAM ARAÇLARI Resim Ekleme 47

48 ÇOKLU ORTAM ARAÇLARI Ses Ekleme 3 farklı yolla ses eklenebilir: Sesi arkaplan olarak ekleyebiliriz. Böylelikle sayfa tarayıcı tarafından yüklendiği anda ses dosyası arkaplanda çalışmaya başlayacaktır. <bgsound src= muzik.wav loop= infinite > Müziğin tekrar sayısı Sayfa içine eklenecek sesin kaynak adresi infinite sayfa kapanana kadar tekrar etmesini salar 48

49 ÇOKLU ORTAM ARAÇLARI Ses Ekleme Ses dosyasına link vererek de ses ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan ses dosyası yürütücü programı çalışacak ve istenen ses dosyasının çalması sağlanacaktır 49

50 ÇOKLU ORTAM ARAÇLARI Ses Ekleme Ses dosyasını sayfa içine gömerek de ses ekleyebiliriz. Ses dosyasının çalışma zamanını belirler. true Ses dosyası, sayfa yüklendiği anda çalışacaktır.!!! mp3, wav, aif, ra, mid yaygın olarak kullanılan ses dosyası türlerindendir.!!! 50

51 ÇOKLU ORTAM ARAÇLARI Video Ekleme Video dosyasına link vererek video ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan video oynatıcı çalışacak ve istenen video dosyasının görüntülenmesi sağlanacaktır. 51

52 ÇOKLU ORTAM ARAÇLARI Video Ekleme Video dosyasını sayfa içine gömerek de video ekleyebiliriz. Videonun çalışma zamanını belirler. true Video, sayfa yüklendiği anda çalışacaktır.!!! mpeg, avi, mov, wmv, asf yaygın olarak kullanılan video türlerindendir.!!! 52

53 ÇERÇEVELER Çerçeveler; bir tarayıcı penceresini birden fazla pencereye bölüp her bir pencere içerisinde farklı içerikler gösterilmesini; sağlar. Her çerçevenin kendine ait bir URL adresi vardır. Her çerçeveye bir isim verilebilir. Çerçeveler kullanıcı tarafından verilecek ölçülerle boyutlandırılabileceği gibi otomatik olarak da boyutlanabilme özelliğine sahiptir. 53

54 ÇERÇEVELER <frameset> Çerçeve oluşturmak için kullanılan etikettir. Tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutları belirlenir. Çerçevelerden oluşan bir sayfanın normal bir HTML belgesinden farkı; içeriğinde <body> etiketi yerine, <frameset> etiketini kullanmasıdır. 54

55 ÇERÇEVELER <frameset> cols Ekranı dikey olarak (sütunlar halinde) tanımlanan parçalara bölmek için kullanılır. Sütun genişlikleri pixel veya % lik olarak belirlenir. Sütun sayısı, çerçeve sayısını belirleyici niteliktedir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. 55

56 ÇERÇEVELER <frameset> rows Ekranı yatay olarak (satırlar halinde) tanımlanan parçalara bölmek için kullanılır. Satır yükseklikleri pixel veya % lik olarak belirlenir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. 56

57 ÇERÇEVELER <frame> <frameset> etiketi ile oluşturulan çerçevelerin içinde gösterilecek sayfaların belirlenmesi için kullanılır. PARAMETRE name resize / noresize scrolling marginheight marginwidth src Çerçevenin adını gösterir. GÖREVİ Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir. Çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) Sayfadaki ilk nesnenin üst kısımdan uzaklığını gösterir. Sayfadaki ilk nesnenin sol kısımdan uzaklığını gösterir. Çerçeve içinde gösterilecek nesnenin URL adresini gösterir. 57

58 ÇERÇEVELER İç İçe Çerçeve Oluşturma İç içe kullanılan <frameset> etiketleri ile aynı pencere içinde yatay ve dikey çerçevelerin birlikte kullanımı sağlanır. 58

59 ÇERÇEVELER <iframe> Hazırlamakta olduğunuz sayfanın herhangi bir yerinde başka bir sayfa görüntülemek istediğiniz zaman kullanılabilen, bir iç çerçeve oluşturmaya yarayan etikettir. PARAMETRE name frameborder scrolling height width src İç çerçevenin adını gösterir. GÖREVİ İç çerçeve kenarlığının olup olmayacağını gösterir. İç çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) İç çerçevenin yüksekliğini gösterir. İç çerçevenin genişliğini gösterir. İç çerçeve içinde gösterilecek nesnenin URL adresini gösterir. 59

60 ÇERÇEVELER <iframe> 60

61 STİL ŞABLONLARI (CSS) Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta olduğumuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar oluşturmaya yarar. CSS kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilmesidir. İsteğe göre tek bir öğeye, tüm sayfaya veya site içerisinde kullanılan tüm dosyalarına etki edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır. 61

62 STİL ŞABLONLARI (CSS) Yerel CSS 62

63 STİL ŞABLONLARI (CSS) Genel CSS 63

64 STİL ŞABLONLARI (CSS) Harici CSS stil.css 64

65 STİL ŞABLONLARI (CSS) Stil Şablonları ile Çalışma (CSS), bir sonraki modülde ayrıntılı olarak anlatılacaktır. 65

66 FORMLAR Etkileşimli Web sayfaları hazırlamanın yolu FORM kullanmaktan geçer. (e-bankacılık, e-ticaret, e-eğitim ) Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. HTML, yalnızca kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez!!! 66

67 FORMLAR <form> Form oluşturmayı sağlayan tüm form elemanları, <form>.</form> etiketleri arasında yer alır. <form ACTION= url METHOD= get / post TARGET= pencere > </form> Formdan girilecek olan bilgilerin değerlendirileceği dosyanın URL adresi Formdan girilecek olan bilgilerin değerlendirici dosyaya gönderim metodu Hedef adresin tarayıcıda gösterileceği pencere GET : Gönderilen veriler adres çubuğunda gösterilir. POST : Gönderilen veriler gizli kalır. <form ACTION= mailto:iletisim@aosbilisim.net METHOD= post TARGET= _blank > 67

68 FORMLAR <form> method GET POST Ayrıntılı bilgi için tıklayın 68

69 FORMLAR <form> method GET POST Ayrıntılı bilgi için tıklayın 69

70 FORMLAR <input> Form içinde bilgi almak için kullanılır. Girişi yapılacak veri türü type parametresi ile belirlenir. Varsayılan veri türü text(metin) tir. Bu etiket kapatılmaz!!! <INPUT ALIGN= hizalama MAXLENGTH=uzunluk NAME= isim SIZE=boyut SRC= adres TYPE= tip VALUE= değer > 70

71 FORMLAR <input> PARAMETRE GÖREVİ type src align name maxlength Size checked disabled Girilecek olan elemanın türünü belirtmek için kullanılır. Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen resim dosyasının adresini belirtmek için kullanılır. Elemanın sayfada konumlanacağı yeri belirlemek için kullanılır. (left / right / center) Girilecek olan verinin değişken ismini belirlemek için kullanılır. Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır. Varsayılan değeri 20 dir. Bir seçim kutusu kullanıldığı durumlarda bu kutuların işaretlenmiş olarak görüntülenmesini sağlamak için kullanılır. Sadece radio ve checkbox elemanları için kullanılır. Veri girişlerini engellemek için kullanılır. 71

72 FORMLAR <input> 72

73 FORM NESNELERİ (INPUT TÜRLERİ) Checkbox Forma onay kutuları eklemek için kullanılır. 73

74 FORM NESNELERİ (INPUT TÜRLERİ) Radio Kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir. 74

75 FORM NESNELERİ (INPUT TÜRLERİ) Radio 75

76 FORM NESNELERİ (INPUT TÜRLERİ) Text Forma, tek satırlık metin alanı eklemek için kullanılır. 76

77 FORM NESNELERİ (INPUT TÜRLERİ) Password Forma, şifreli alanlar eklemek için kullanılır. 77

78 FORM NESNELERİ (INPUT TÜRLERİ) Textarea Forma birden fazla satırdan oluşan alanlar eklemek için kullanılır. Rows (satır) ve cols (sütun) tanımlamaları ile, metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir. 78

79 FORM NESNELERİ (INPUT TÜRLERİ) Select (Açılır Menü) Forma açılır menü eklemek için kullanılır. Listbox(liste kutusu) drop-down list(aşağı açılır liste) şeklinde iki farklı türde seçim kutusu oluşturulabilir. Liste elemanları, <option> etiketi ile belirlenir. drop-down list listbox 79

80 FORM NESNELERİ (INPUT TÜRLERİ) Select (Açılır Menü) 80

81 FORM NESNELERİ (INPUT TÜRLERİ) Reset Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar. <input type= reset value= Temizle > 81

82 FORM NESNELERİ (INPUT TÜRLERİ) Submit Form içine girilen bilgilerin sunucuya gönderilmesini sağlamak için kullanılır. <input type= submit value= Gönder > 82

83 Şimdilik bu kadar web tasarımı ve programlamayla ilgili bir sonraki yayın C S S 83

84 İ L E T İ Ş İ M hakanbabac.net iletisim@hakanbabac.net 84

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

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

Detaylı

Web Tasarımının Temelleri

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

Detaylı

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

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

Detaylı

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ı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Formlar Kullanıcının da aktif olacağı dinamik web sayfaları

Detaylı

Web Tasarımının Temelleri

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

Detaylı

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

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

Detaylı

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ı

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ı

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

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

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ı

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ı

Web Teknolojileri ve Programla

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

Detaylı

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

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ı

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

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ı

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ı

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ı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri

Detaylı

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

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

Detaylı

Site Temizlik Projesi Kodları

Site Temizlik Projesi Kodları Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

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

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

Detaylı

Site Tasarım Çalışması -3

Site Tasarım Çalışması -3 Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;

Detaylı

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

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

Detaylı

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ı

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ı

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ı

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ı

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ı

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

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

Detaylı

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

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

Detaylı

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

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ı

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 sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

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

Detaylı

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ı

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ı

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ı

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ı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek

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ı

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ı

HTML Bloklar. CSS Display özelliği

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

Detaylı

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ı

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

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

Detaylı

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ı

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

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

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

Detaylı

Metin İşlemleri, Semboller

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

Detaylı

HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN

HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN HTML Nedir? İşaretleme dili (HyperText Markup Language) Web sayfalarında gösterim işini sağlamak için kullanılan bir işaretleme dilidir. İşaretleme dili, metinlerin

Detaylı

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

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

Detaylı

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ı

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ı

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ı

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

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

Detaylı

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ı

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

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

Detaylı

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

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

Detaylı

2. Belgeye Metin Ekleme

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

Detaylı

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

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

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ı

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

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ı

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ı

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ı

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ı

ÖĞRENME-ÖĞRETME YÖNTEM VE TEKNİKLERİ. Anlatım, göstererek yaptırma, uygulamalı çalışma. Anlatım, göstererek yaptırma, uygulamalı çalışma.

ÖĞRENME-ÖĞRETME YÖNTEM VE TEKNİKLERİ. Anlatım, göstererek yaptırma, uygulamalı çalışma. Anlatım, göstererek yaptırma, uygulamalı çalışma. EYLÜL EKİM 2.09.2009 25.09.2009 28.09.2009 02.10.2009 05.10.2009 09.10.2009 12.10.2009 16.10.2009 19.10.2009 23.10.2009 İnternet ile ilgili temel kavramları ve İnternet Tarayıcısının işlevini açıklayabilir.

Detaylı

Silmek istediğiniz satır/sütun/hücre yi seçin ve aşağıdaki adımlardan birini takip edin:

Silmek istediğiniz satır/sütun/hücre yi seçin ve aşağıdaki adımlardan birini takip edin: Satır/Sütun/Hücre Ekleme Paket Programlar Not_04 Oluşturduğunuz tabloya satır, sütun ve hücre ekleyebilirsiniz. Bunun için ekleme yapacağınız hücreye tıklayın ve aşağıdaki adımlardan birini takip edin:

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ı

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

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

Detaylı

8.Sayfa ve 9.Yazım 10.Belge Görünüm 11.Ekran Yakınlaştırma Sözcük Sayısı Denetimi Düğmeleri ve Uzaklaştırma

8.Sayfa ve 9.Yazım 10.Belge Görünüm 11.Ekran Yakınlaştırma Sözcük Sayısı Denetimi Düğmeleri ve Uzaklaştırma Genel Ekran Görünümü 1.Ofis Düğmesi 2.Hızlı Erişim Araç Çubuğu 3.Belge Başlığı 4.Menüler 5.Menü Şeridi 6.Kaydırma Çubuğu 7.Cetveller 8.Sayfa ve 9.Yazım 10.Belge Görünüm 11.Ekran Yakınlaştırma Sözcük Sayısı

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ı

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ı

KONULAR VE UYGULAMA LİSTESİ

KONULAR VE UYGULAMA LİSTESİ KARAELBİSTAN TEKNİK VE ENDÜSTRİ MESLEK LİSESİ 2013 2014 ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ ALANI WEB PROGRAMCILIĞI DALI İŞLETMELERDE BEÇERİ EĞİTİMİ DERSİ STAJ DOSYASINDA BULUNMASI GEREKEN KONULAR VE UYGULAMALAR

Detaylı

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir?

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? ÇALIŞMA SORULARI 1. HTML nedir? a) Sayfa içindeki metinlerin tarayıcıda nasıl görüneceğini ve işlevsel olacağını düzenleyen işaret dilidir. b) Diğer sayfaları bağlayan linkler c) Nesneyi bağlayan linkler

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ı

WEB TASARIMIN TEMELLERİ

WEB TASARIMIN TEMELLERİ WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.

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ı

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ı

Daha önce kayıt olduğunuz e-posta adresinizi girin. Parolanızı bu alana giriniz ve giriş tuşuna basınız

Daha önce kayıt olduğunuz e-posta adresinizi girin. Parolanızı bu alana giriniz ve giriş tuşuna basınız İlgili Kongrenin web sayfasında yayınlanan E-posterinizi hazırlamaya başlamak için lütfen burayı tıklayınız linkini tıklayarak E-poster sayfasını açınız * Sisteme giriş için, bildiri özetinizi gönderirken

Detaylı

WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)

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

Detaylı

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,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 Teknolojileri ve Programla

Web Teknolojileri ve Programla Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Temel Kavramlar İnternet HTML WWW HTTP, HTTPS FTP Web

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için <input> 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ı

DIV KAVRAMI <style> position: absolute

DIV KAVRAMI <style> position: absolute DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde

Detaylı

İnternet Tarayıcı programlar ile internet sitelerini açabiliriz. Açık olan sitelerin sekmeleri

İnternet Tarayıcı programlar ile internet sitelerini açabiliriz. Açık olan sitelerin sekmeleri INTERNET EXPLORER TEMEL İŞLEMLER GOOGLE ARAMA TEKNİKLERİ E-MAIL KULLANIMI İnternet Tarayıcı programlar ile internet sitelerini açabiliriz. ADRES ÇUBUĞU: Açmak istediğimiz sitenin adresini buraya yazarız.

Detaylı

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML Formları Temel Başlıklar HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML/WWW veri paylaşımı üzerine kurulmuştur. Html işaretleme dilidir. Diğer içerikler ile bağlantılar (linkler)

Detaylı

Aaraçlar Menüsünden Seçeneklerden Görünüm

Aaraçlar Menüsünden Seçeneklerden Görünüm Word 2003 açtığımızda ARAÇLAR>SEÇENEKLER>GÖRÜNÜM açılır. anlatılcaktır. karşımıza bu ekran çıkar burdaki komutlar altda İlk Görev Bölmesi Word'ü ilk başlattığınızda Başlarken görev bölmesini görüntüler.

Detaylı

2) <head></head> 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ı

BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? 2. POWERPOINT PROGRAMININ BAŞLATILMASI

BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? 2. POWERPOINT PROGRAMININ BAŞLATILMASI BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? Microsoft Office Paketi ile birlikte kullanıcıya sunulan Powerpoint Programı, etkileşimli sunular (Presentation) hazırlamaya yarayan metin tabanlı

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ı

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ı